当前位置: 首页 > Web前端 > vue.js

vue分片注意

时间:2023-04-01 11:46:44 vue.js

vueslot插槽内容(随便放什么),在组件中添加组件:Vue.component('child',{template:`

Hello,World!
`})使用:
你是谁,我是默认槽
命名槽(顾名思义就是给槽起个名字)name="aaa">
`})使用:aaabbb
你是谁,我默认slot.
作用域槽(组件上的属性,可以在组件元素内使用)在在元素上定义一个属性work,使用组件child,在组件中的template元素上添加属性slot-scope并命名为setWork组件定义:Vue.component('child',{template:`
`})使用:      {{setWork}}
Vue父子组件生命周期Vue实例需要创建、初始化数据、编译模板、挂载DOM、渲染、更新、渲染、卸载等一系列过程,这个过程就是vue的生命周期vue提供的钩子函数:beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed,父子组件嵌套时,有自己的钩子函数说明:创建阶段:beforeCreate、created、beforeMount、mounted四个钩子functions更新流程:beforeUpdate,updated,父子流程——ParentBeforeUpdate->ChildBeforeUpdate->ChildUpdated->ParentUpdated销毁流程:beforeDestroy,destroyedVuekeep-alivekeep-alive是Vue的内置组件,可以保持被包含组件的状态,或者避免重新渲染,它有两个属性:include(被包含组件缓存)和exclude(被排除组件不缓存,优先级大于include)对应的生命周期:activated和deactivated使用方法:include/exclude使用regular或者是数组时,使用v-bind生效Vue的双向绑定数据劫持结合了发布者-订阅者模式,通过Object.defineProperty(),当数据发生变化时向订阅者发布消息,并触发相应的监听回调Vue依赖于collectionVue需要能够知道一条数据是否被使用。实现这种机制的技术称为依赖收集。每个组件实例都有对应的watcher实例——渲染组件的过程会将属性记录为一个依赖——当我们操作一条数据时,会调用依赖的setter,从而通知watcher重新计算,从而引发关联的组件可以被更新。Vue依赖收集和观察者模式依赖收集是一对多的。如果一个数据发生变化,将处理多个使用过的数据。这创建了一个观察者模式。Vue依赖集合:依赖数据是观察目标——视图、计算属性、监听器这些是观察者Vue——??MVVM“View”:视图层(UI用户界面)“ViewModel”:业务逻辑层(所有js可视为业务逻辑)”Model》:数据层(增删改查等数据存储和数据处理)1.实现一个数据监听器Observer,可以监听数据对象的所有属性,如果有变化就获取最新的值并且通知订阅者2.实现一个命令解析器Compile,扫描并解析每个元素节点的命令,根据命令模板替换数据,绑定相应的更新函数3.实现一个Watcher作为连接Observer和Compile的桥梁可以订阅和接收每个属性变化的通知,并执行命令绑定的相应回调函数来更新视图。动态路由前端写路由,不合理的情况比较多,权限显示不一样(用户,按钮)。前端将路由配置给后端,登录后会根据用户不同的后端传递给前端显示路由。延迟加载。:component:resolve=>(require(['要加载路由的地址']),resolve)具体使用importVuefrom'vue'importRouterfrom'vue-router'  /*前面的import省略这里是HelloWorld模块*/Vue.use(Router)exportdefaultnewRouter({routes:[{path:'/',name:'HelloWorld',component:resolve=>(require(["@/components/HelloWorld"],resolve))}]})ES提出的import方法的用法:constHelloWorld=()=>import('要加载模块的地址')具体使用importVuefrom'vue'importRouterfrom'vue-router'Vue.use(Router)constHelloWorld=()=>import("@/components/HelloWorld")exportdefaultnewRouter({routes:[{path:'/',name:'HelloWorld',component:HelloWorld}]})组件懒加载类似于路由懒加载Vue.syncmodifier当子组件改变了prop的值时,这个change也会同步到父组件中的绑定,比如弹窗(子组件关闭弹窗同时改变父组件的ff状态)modelPopup组件: