什么样的水平可以做网站,电子商务网站建设有管理课后答案,wordpress用户登录设置,wordpress蒸汽波主题提示#xff1a;文章写完后#xff0c;目录可以自动生成#xff0c;如何生成可参考右边的帮助文档 文章目录 2.2双向绑定的原理是什么vue框架采用的是数据双向绑定的方式#xff0c;由三个重要部分构成2.2.1.ViewModel2.2.2 双向绑定2.2.3.1.编译Compile2.2.3.2.依赖收集 3… 提示文章写完后目录可以自动生成如何生成可参考右边的帮助文档 文章目录 2.2双向绑定的原理是什么vue框架采用的是数据双向绑定的方式由三个重要部分构成2.2.1.ViewModel2.2.2 双向绑定2.2.3.1.编译Compile2.2.3.2.依赖收集 3.组件通信方式3.1概念3.2解决了什么3.3分类3.4方案3.4.1.props3.4.2.$emit 触发自定义事件3.4.3.ref3.4.4.EventBus3.4.5.provide和inject3.4.6.vuex 3.5.小结 4.data属性是一个函数和是一个对象的区别4.1.实例和组件定义data的区别4.2.区别4.3.结论 5.动态给vue的data添加一个新的属性时会发生什么怎样解决5.1.直接添加属性5.2分析5.3.解决方法5.3.1.Vue.set()5.3.2.Object.assign()5.3.3.$forceUpdate 5.4.小结 6.v-if和v-for的优先级6.1.作用6.2.优先级6.2.1.示例 6.3.注意事项 7.v-show和v-if区别使用场景7.1.共同点7.2.区别7.3.原理分析7.3.1.v-show7.3.2.v-if 7.4.使用场景 8.vue中的key8.1.1.背后的事情 8.2.设置key与不设置key区别8.2.1.设置key值一定能提高diff效率吗 9.常用的修饰符9.1.定义9.2.作用9.2.1.表单修饰符9.2.1.1.lazy9.2.1.2.trim9.2.1.3.number 9.2.2.事件修饰符9.2.2.1.stop9.2.2.2.prevent9.2.2.3.self9.2.2.4.once9.2.2.5.capture9.2.2.6.passive9.2.2.7.native10.2.3.鼠标按钮修饰符10.2.4.键盘修饰符10.2.5.v-bind修饰符10.2.5.1.async10.2.5.2.props 2.2双向绑定的原理是什么
vue框架采用的是数据双向绑定的方式由三个重要部分构成
数据层(Model):应用的数据及业务逻辑视图层(View):应用的展示效果ui组件业务处理层(ViewModel):框架封装的核心负责将数据与视图关联起来这个分层的方案有一个专业术语MVVM这里控制的核心功能便是数据双向绑定。
2.2.1.ViewModel
主要职责
数据变化后更新视图视图变化后更新数据 还有两个主要部分监听器(Observer):对所有数据的属性进行监听解析器(Compiler):对每个元素节点的指令进行扫描和解析根据指令模板替换数据以及绑定相应的更新函数
2.2.2 双向绑定
vue中的双向绑定的流程
new Vue()首先执行初始化对data执行响应化处理这个过程发生在Observe中对模板执行编译找到其中动态绑定的数据从data中获取并初始化视图发生在Compile中定义一个更新函数和Watcher将来对应数据变化时Watcher会调用更新函数由于data的某个key在一个视图中可能出现多次所有每个key都需要一个管家Dep来管理多个Watcher将来data中数据一旦发生变化会首先找到对应的Dep,通知所有Watcher执行更新函数 http://cmsadm.caidao8.com/electricityTax/showInstruction.hx?uuid5c81c7c0e8ba4a078d4c32e811fab932
2.2.3.1.编译Compile
对每个元素节点的指令进行扫描和解析根据指令模板替换数据以及绑定相应的更新函数 2.2.3.2.依赖收集
data中的某个key同一个key可能出现多次每次都需要收集出来用一个watcher来维护他们此过程称为依赖收集多个watcher需要一个Dep来管理需要更新时由Dep统一通知
3.组件通信方式
3.1概念
组件通信 组件是框架最强大的功能之一每一个.vue结尾的文件都可以称为一个组件。 通信指的是发送者通过某种格式来传递信息到接收者以达到某个目的。 广义上任何信息的传递都是组件间通信。通过一种方式来传递信息以达到某个目的。
3.2解决了什么
通信的本质是信息同步共享框架中每个组件之间都有独自的作用域组件之间的数据是无法共享的。但由于开发中需要让组件之间共享数据这样通过组件通信就可以实现同步。
3.3分类
父子组件之间兄弟组件之间祖孙与后代非关系组件之间
3.4方案
常规通信方案
props$emit触发自定义事件refEventBusProvide与InjectVuex
3.4.1.props 适用场景父-子子组件设置props属性用来接收父组件传递的参数父组件在使用子组件标签中通过字面量来传递值 Children.vue
props:{//字符串形式name:String,age:{type:Number,default:19,require:true }
}
Father.vue
Children name age 19 /3.4.2.$emit 触发自定义事件
适用场景子组件传递给父组件子组件通过$emit触发自定义事件第二个参数为传递的数据父组件绑定监听器获取到子组件传递过来的数据 Children.vue
methods:{sendData(){this.$emit(add,info) }
}Father.vue
Children addchildren($event) /3.4.3.ref
父组件在使用子组件的时候设置ref父组件通过设置子组件 ref来获取数据 父组件
Children reffoo /
//获取子组件实例方法,就能获取到对应数据
this.$refs.foo3.4.4.EventBus
兄弟组件传值创建一个中央事件总线EventBus兄弟组件通过$emit触发自定义事件$emit第二个参数为传递的数值另一个兄弟组件通过$on监听自定义事件
//main.js
Vue.prototype.$bus new Vue()
Children1.vue
this.$bus.$emit(foo)Children2.vue
this.$bus.$on(foo,this.nameData)3.4.5.provide和inject
在祖先组件定义provide属性返回传递的值在后代组件通过inject接收组件传递过来的值 祖先组件
provide(){return{foo:foo }
}后代组件
inject:[foo] //获取到祖先组件传递过来的值3.4.6.vuex
复杂关系的组件数据传递vuex相当于一个用来存储共享变量的容器 state用来存放共享变量getter,可以增加一个getter派生状态(相当于store中的计算属性),用来获得共享变量的值mutations用来存放修改state的方法actions也是用来存放修改state的方法不过action是在mutations的基础上进行。常用来做一些异步操作
3.5.小结
父子关系选择props或ref兄弟关系选择$bus祖先与后代选择Provide与Inject复杂关系选择vuex存放共享的数据变量
4.data属性是一个函数和是一个对象的区别
4.1.实例和组件定义data的区别
vue实例的时候定义data属性即可以是一个对象也可以是一个函数
const app new Vue({el:#app,//对象格式data:{foo:foo },//函数格式data(){return{foo:foo } }
})组件中定义data属性只能是一个函数 如果定义为一个对象
Vue.component(component1,{template:div组件/div,data:{foo:foo }
})则会得到警告信息返回的data应该是一个函数
4.2.区别
function Component(){}
Component.prototype.data {count:0
}创建两个组件实例
const componentA new Component()
const componentB new Component()
//修改componentA组件data属性的值componentB中的值也发生了变化
console.log(componentB.data.count)//0
componentA.data.count 1
console.log(componentB.data.count)//1
//因为共用了一个内存地址采用函数的形式则不会有影响(函数返回的对象内存地址并不相同)
function Component(){this.data this.data()
}
Component.prototype.data function(){return {count:0 }
}
//修改componentA组件data属性的值componentB中的值不受影响
console.log(componentB.data.count)//0
componentA.data.count 1
console.log(componentB.data.count)//14.3.结论
根实例对象data可以是对象也可以是函数(根实例时单例)不会产生数据污染情况。组件实例对象data必须是函数目的是为防止多个组件实例对象之间共用一个data会产生数据污染。采用函数的形式initData时会将其作为工厂函数都会返回全新的data对象
5.动态给vue的data添加一个新的属性时会发生什么怎样解决
5.1.直接添加属性
从一个例子开始定义一个p标签通过v-for遍历 然后给button绑定点击事件预期点击按钮时数据新增一个属性界面新增一行
p v-for(value,key) in item :keykey{{value}}/p
button clickaddProperty动态添加新属性/button实例化一个实例定义data属性和methods方法
const app new Vue({el:#app,data:(){item:{oldProperty:旧属性 } },methods:{addProperty(){this.item.newProperty 新属性 //添加console.log(this.item);//输出 }}
})触发按钮发现数据更新了但页面没有更新
5.2分析
vue2是用Object.defineProperty实现的数据响应式
const obj {};
Object.defineProperty(obj,foo,{get(){console.log(get foo:${val})return val;},set(newVal){if(newVal ! val){console.log(set foo:${newVal})val newVal }}
})当访问foo属性或者设置foo值的时候都能够触发setter和getter
obj.foo
obj.foo new当为obj添加新属性时却无法触发事件属性的拦截
obj.newPro 新属性 一开始obj的foo属性被设定成响应式数据而newPro是后面新增的属性并没有通过Object.defineProperty设置成响应式数据
5.3.解决方法
Vue不允许在已经创建的实例上动态添加新的响应式属性若想实现数据与视图同步更新以下三种方式
Vue.set()Object.assign()$forceUpdated()
5.3.1.Vue.set()
Vue.set(target,propertyName/index,value)
{Object | Array} target{ string | number } propertyName/index{ any } value 返回值设置的值 通过Vue.set向响应式对象中添加一个property并确定这个新property同样是响应式的且触发视图更新。其内部是调用defineReactive方法通过Object.difineProperty实现属性拦截
5.3.2.Object.assign()
直接使用Object.assign()添加到对象的新属性不会触发更新应创建一个新的对象合并原对象和混入对象的属性
this.someObject Object.assign({},this.someObject,{newProperty1:1,newProperty2:2})5.3.3.$forceUpdate
如果需要在vue中做一次强制更新99.9%的情况是在某个地方做了错误的写法迫使实例重新渲染。仅仅影响实例本身和插入插槽内容的子组件而不是所有子组件。
5.4.小结
如果添加少量的新属性可以采用Vue.set()如果添加大量的新属性采用Object.assign()创建新对象(不建议)比较粗暴的方式$forceUpdate() 强制刷新 vue3 用proxy实现的数据响应式添加新属性时可以实现数据响应式
6.v-if和v-for的优先级
6.1.作用
v-if指令用于条件性地渲染一块内容。指令表达式返回true时被渲染 v-for指令基于一个数组来渲染一个列表。需要使用item in data形式的特殊语法其中data是源数据而item是被迭代的数组元素的别名 在v-for时建议设置key值并且保证每个key值是独一无二的这便于diff算法进行优化
6.2.优先级
v-if与v-for都是vue模板系统中的一个指令 在模板编译时会将指令系统转化成可执行的render函数
6.2.1.示例
div idappp v-ifisShow v-foritem in items{{item.title}}/p
/div创建vue实例存放isShow与items数据
const app new Vue({el:#app,data(){return{items:[{title:foo},{title:更多} ] } },computed:{isShow(){return this.items this.items.length 0 } }
})模板指令的代码都会生成在render函数中通过app.$options.render就能得到渲染函数
f anonymous(){with(this){return _c(div,{attrs:{id:app}},_l((items),function(item){return (isShow) ? _c(p,[_v(\n _s(item.title) \n)]) : _e() }),0)}
}_l是vue的列表渲染函数函数内部都会进行一次if判断 初步得到结论v-for优先级是比v-if高 再将v-for与v-if放到不同标签上
div idapptemplate v-ifisShowp v-foritem in listData :keyitem.id{{}}/p /template
/div再输出render函数
f anonymous(){with(this){return _c(div,{attrs:{id:app}},[(isShow)?[_v(\n),_l((items),function(item){return _c(p,[_v(_s(item.title))])})]:_e()],2)}
}当作用在不同标签上时是先进行判断再进行列表的渲染。 在进行if判断时v-for是比v-if先进行判断 最终结论v-for优先级高于v-if
6.3.注意事项
两个指令不要放在同一个元素上带来性能方面的浪费。 外层嵌套template(页面渲染不生成dom节点)进行判断在内部v-for循环 如果条件出现在内部通过计算属性computed提前过滤掉不需要显式的项
computed:{listdata:function(){return this.list.filter(function(item){return item.isShow }) }
}7.v-show和v-if区别使用场景
7.1.共同点
都能控制元素是否显式
7.2.区别
控制手段不同编译过程不同编译条件不同 控制手段不同v-show隐藏是为元素添加样式隐藏display:nonedom元素依旧还在。v-if显式隐藏是将dom整个添加或删除 编译过程不同v-if切换有有一个局部编译/卸载的过程切换过程中合适地销毁和重建内部的事件监听和子组件。v-show只是简单的基于css切换 编译条件v-if是真正的条件渲染它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时并不做操作直到为真才渲染。 性能消耗v-if有更高的切换消耗v-show有更高的初始渲染消耗
7.3.原理分析
大概过程
将模板template转为ast结构的js对象用ast得到的js对象拼装render和staticRenderFns函数render和staticRenderFns函数被调用后生成虚拟VNODE节点该节点包含创建DOM节点所需信息vm.patch函数通过虚拟DOM算法利用VNODE节点创建真实DOM
7.3.1.v-show
不管初始条件是什么元素总是会被渲染
7.3.2.v-if
v-if在实现上比v-show要复杂因为还有else else-if等条件需要处理
7.4.使用场景
v-if相比v-show开销更大如果需要频繁切换使用v-show较合适如果在运行时条件很少改变使用v-if较合适
8.vue中的key
在使用v-for时需要给单元加上key key是给每一个vnode的唯一id也是diff的一种优化策略可以根据key更准确更快的找到对应的vnode节点
8.1.1.背后的事情
如果不用keyVue会采用就地原则最小化element的移动并且会尝试尽最大程度在同适当的地方对相同类型的element做patch或者reuse如果使用keyVue会根据keys的顺序记录element曾经拥有了key的element 如果不再出现的话会被直接remove或destoryed用new Date()生成的时间戳作为key手动强制触发重新渲染当拥有新值的render作为key时拥有了新key的comp出现了那么旧key Comp会被移除新 key Comp触发渲染
8.2.设置key与不设置key区别
创建一个实例2秒后往items插入数据
bodydiv idappp v-foritem in items :keyitem{{item}}/p /divscriptconst app new Vue({el:#app,data:{items:[a,b,c,d]},mounted(){setTimeout((){this.itmes.splice(2,0,f)},2000) } }) /script
/body在不使用key时
8.2.1.设置key值一定能提高diff效率吗
文档明确表示 当用v-for正在更新已渲染过的元素列表时它默认用就地复用策略。如果数据项的顺序被改变vue将不会移动dom元素来匹配数据项的顺序而是简单复用此处每个元素并且确保它在特定索引下显示已渲染过的每个元素。此默认的模式是高效的只适用于不依赖子组件状态或临时dom状态(例如表单输入值)的列表渲染输出
9.常用的修饰符
9.1.定义
是用于限定类型以及类型成员的声明的一种符号 处理了许多DOM事件的细节不再需要花时间去处理零碎的事情而能有更多的精力专注于程序的逻辑处理。 分为以下五种表单修饰符事件修饰符鼠标按键修饰符键值修饰符v-bind修饰符
9.2.作用
9.2.1.表单修饰符
在填写表单时用的最多的是input标签指令用的最多的是v-model关于表单的修饰符有
lazytrimnumber
9.2.1.1.lazy
在填写完信息后光标离开标签时才会将值赋予给value也就是在change事件之后之后再进行信息同步
input typetext v-model.lazyvalue /
p{{value}}/p9.2.1.2.trim
自动过滤用户输入的首空格字符而中间的空格不会过滤
input typetext v-model.trimvalue /9.2.1.3.number
自动将用户的输入值转为数值类型但如果这个值无法被parseFloat解析则会返回原来的值
input v-model.numberage typenumber9.2.2.事件修饰符
是对事件捕获以及目标进行了处理有如下
stoppreventselfoncecapturepassivenative
9.2.2.1.stop
阻止事件冒泡相当于调用event.stopPropagation方法
div clickshout(2)button click.stopshout(1)ok/button
/div
9.2.2.2.prevent
阻止默认行为相当于event.preventDefault方法
form v-on:submit.preventonSubmit/form9.2.2.3.self
只当在event.target是当前元素自身时触发处理函数
div v-on:click.self.../div顺序很重要相应的代码会以同样的顺序产生。用v-on:click.prevent.self会阻止所有的点击。而v-on:click.self.prevent 只会阻止对元素自身的点击
9.2.2.4.once
绑定了事件只能触发一次第二次就不会触发
button click.onceadd(1)ok/button9.2.2.5.capture
使事件触发从包含这个元素的顶层开始往下触发
div click.captureadd(1)
obj1
div click.captureadd(2)
obj2
div clickadd(3)
obj3
div clickadd(4)
obj4/div
/div
/div
/div9.2.2.6.passive
在移动端当监听元素滚动事件时会一直触发onscroll事件会让网页变卡因此使用时相当于给onscroll事件加了一个.lazy修饰符
//滚动事件的默认行为将会立即触发而不会等待onScroll完成其中包括event.preventDefault()的情况
div v-on:scroll.passiveonScroll/div.passive和prevent不能一起使用因为.prevent将会被忽略同时浏览器会展示一个警告
9.2.2.7.native
让组件变成像html内置标签那样监听根元素的原生事件否则组件上使用v-on只会监听自定义事件
chrildren-component v-on:click.nativeadd /注意使用native修饰符来操作普通html标签是会令事件失效。
10.2.3.鼠标按钮修饰符
鼠标按钮修饰符针对的就是左键、右键、中键点击
left左键middle中键right右键
button click.leftadd(1)ok/button
button click.rightadd(2)/button10.2.4.键盘修饰符
键盘事件(onkeyup,onkeydown)keyCode有很多但vue为我们提供了很多别名分为以下两种
普通键(enter、tab、delete、space、esc、)系统修饰键(ctrl、alt、meta、shift...)
//只有按键为keyCode的时候才触发
input typetext keyup.keyCodeadd()还可以通过以下方式自定义一些全局的键盘吗别名
Vue.config.keyCodes.f2 11310.2.5.v-bind修饰符
为属性进行操作
asyncpropcamel
10.2.5.1.async
能对props进行一个双向绑定
//父组件
component :myMessage.syncbar/component
//子组件
this.$emit(update:myMessage,params)以上方式相当于以下的简写
component :myMessagebar update:myMessageadd/component
script
add(e){this.bar e
}
/script
!--子组件--
script
func(){this.$emit(update:myMessage,data)
}
/script使用sync需要注意以下
使用async的时候子组件传递的事件名称格式必须为update:value其中value必须与子组件中props中声明的名称完全一致注意带有.async修饰符的v-bind不能和表达式一起使用将v-bind.sync用在一个字面量的对象上例如v-bind.sync{title:doc.title},是无法正常工作的。
10.2.5.2.props
设置自定义标签属性避免暴露数据防止污染HTML结构
input iduid titletitle1 value1 :index.propindex
