赞
踩
1.数据模型 -->vm中的data,
状态管理:
我们使用一个数据去管理一个视图中的一部分,那么这条数据叫做状态,这种管理叫做状态管理。
总结:
深入响应式原理是利用数据劫持和订阅和发布模式,当数据模型发生改变时,视图就会响应进行更新,那么深入响应式原理是利用es5的Object.defineProperty中个getter/setter来进行数据的劫持的。
解释:
数据劫持:
Object.defineProperty中的getter/setter , 然后在执行watcher
订阅发布:事件(自定义事件)
订阅:事件的申明(vm.KaTeX parse error: Expected 'EOF', got '&' at position 6: on); &̲nbsp; 发布:事…emit);
深入响应式的原理:
1.当视图模型(VM)中的数据模型(M)发生改变时, 视图(V)就会进行更新
2.vue通过watch将data中的属性全部使用Object.defineProperty编程setter和getter,当属性值发生改变时,就会触发,然后watch就会触发,视图就会发生更新。
3.注意事项:数据必须在data中才能实现深入响应式的原理。
底层原理:
运用es5中的Object.defineProperty(obj,obj.attr,descriptor)的方法。
参数:
obj:要在其上定义属性的对象。
obj.attr: 要定义或修改的属性的名称。
descriptor:将被定义或修改的属性描述符。它是一个对象, 这个对象有哪些构成?
configurable: 决定了对象的key是否可删除
enumerable: 决定了对象是否可遍历(枚举)
writeable: 决定了对象的key的value是否可修改;
**存储器:
get函数------getter();
set函数 ------setter();
举例:
<div id="app"> <h3> {{msg}} </h3> <h3> {{num}} </h3> <button @click = "setHandler"> 点击 </button> </div> <script> var vm = new Vue({ el: '#app', data: { msg: 'hello vue.js', list: { id: 1 } }, methods: { setHandler(){ this.$set(this.list,'name','张骏') } }, watch: { /* watch中存放的是方法, 方法名就是M(data选项) */ msg(){ console.log('msg改变了') } } }) console.log(vm) 结果是:id:1,name : 张骏。 </script>
非响应式情况:
在vm模型的data外定义的属性,就是非响应式属性,属性值更新,视图不会更新
将非响应式变成响应式就是将其合并到响应式属性上。利用vue提供的方法:
Vue.set/this.$set(vm.dataattr,prop,value)
以上代码就像在js中简单的将两个对象合并:Object.assign(目标对象, 当前对象)。
将非响应式属性合并到响应式属性上
Vue.set(vm.someObj,prop,value)
this.$set(vm.someObj,prop,value)
1.v-model 双向数据绑定:
效果:数据改变,视图更新;视图改变,数据更新。
2.缺点:就是v-model默认绑定value,所以只能在表单中使用。
原理:
v-model默认绑定了Dom对象的value属性,当它初次绑定的时,就会触发getter,其次watch
就会触发,watch会通知vue更新DOM对象。
2.为什么视图修改数据就会修改:
当视图修改时,表示着DOM对象的value值也发生了改变,其次就会触发setter,watch监听
机制就会执行,watcher通知Vue生成新的VDOM树,再通过render函数进行渲染,生成真实DOM
举例:
<div id="app">
<input type="text" v-model = "msg">
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello vue.js'
}
})
</script>
1.作用:
用来监听数据的交换,当数据模型发生改变时,watch就会触发。
2.用法:
第一种用法:
1. key的value值是一个函数
new Vue({
watch: {
key(value,oldvalue){}
}
})
第二种用法:
key的value值是一个对象:
new Vue({
watch: {
key: {
deep: true/false 深入监听,
handler(value,oldvalue){} // 监听的处理函数
}
}
})
watch中的key指的就是data选项中key
举例:
当我写好姓和名 , 全称自动显示:
第一种写法: <div id="app"> <div> 姓: <input type="text" v-model = "firstName"> </div> <div> 名: <input type="text" v-model = "lastName"> </div> <div> 全称; <input type="text" v-model = "fullName"> </div> </div> <script> new Vue({ el: '#app', data: { firstName: '', lastName: '', fullName: '' }, watch: { firstName(val){ this.fullName = val + this.lastName }, lastName(val){ this.fullName = this.firstName + val }, fullName(val){ console.log( val ) this.firstName = val.slice(0,1) this.lastName = val.slice(1) } } }) </script>
<div id="app"> <div> 姓: <input type="text" v-model = "firstName"> </div> <div> 名: <input type="text" v-model = "lastName"> </div> <div> 全称 <input type="text" v-model = "fullName"> </div> </div> <script> new Vue({ el: '#app', data: { firstName: '', lastName: '', }, computed: { fullName(){ return this.firstName + this.lastName } } }) </script>
补充:
watch 与 computed的区别:
上图:
** computed特性:
1.是计算值,
2.应用:就是简化tempalte里面{{}}计算和处理props或$emit的传值;
3.具有缓存性,页面重新渲染值不变化,计算属性会立即返回之前的计算结果,而不必再次执行函数
4.computed擅长处理的场景:一个数据受多个数据影响
** watch特性:
1.是观察的动作,
2.应用:监听props,$emit或本组件的值执行异步操作
3.无缓存性,页面重新渲染时值不变化也会执行
4.watch擅长处理的场景:一个数据影响多个数据
methods , watch 与 computed的区别:
1.从作用机制上
watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:
当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生
变化,也就是自动调用相关的函数去实现数据的变动。
.对methods:methods里面是用来定义函数的,很显然,它需要手动调用才能执行。而不像
watch和computed那样,“自动执行”预先定义的函数
总结:
methods里面定义的函数,是需要主动调用的,而和watch和computed相关的函数,会自动
调用,完成我们希望完成的作用
2.从性质上看
methods里面定义的是函数,你显然需要像"fuc()"这样去调用它(假设函数为fuc)
computed是计算属性,事实上和和data对象里的数据属性是同一类的(使用上),
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。