我是靠谱客的博主 魁梧水池,这篇文章主要介绍vue.js底层的原理,现在分享给大家,希望可以做个参考。

一、深入响应式原理
1. 当视图模型(VM)中的数据模型(M)发生改变时, 视图(V)就会进行更新
2. Vue通过watcher将data中的属性全部使用Object.definePropery编程getter和setter,当属性值发生改变的时候, 就会触发, 然后wather就会触发, 告诉视图(V)进行重新渲染
3. 数据必须放在data选项中才能进行深入响应式

底层原理:核心使用的是es5的一个方法,这个方法不支持ie8以及以下

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
Object.defineProperty(obj,obj.attr,descriptor) 参数: obj 要在其上定义属性的对象。 prop 要定义或修改的属性的名称。 descriptor 将被定义或修改的属性描述符。它是一个对象, 这个对象有哪些构成? configurable: 决定了对象的key是否可删除 enumerable: 决定了对象是否可遍历(枚举) writeable: 决定了对象的key的value是否可修改 存储器: get函数 ----起了个名字getter 设置当前对象的key的初始值 set函数 ----起了个名字setter 修改当前对象的key的值 代码: Vue.set(vm.list,'num',1000) console.log(vm) var obj = { name:'呵呵' } Object.defineProperty(obj,'name',{ //存储器 get(){ //要求必须有返回值 return '哈哈' }, set(value){ //value就是修改后的对象的key的value console.log('set') console.log(value); document.querySelector('#app').innerHTML = value }

二、双向数据绑定

  1. 效果
    数据改 , 视图更
    视图改, 数据更
    2. 实现
    使用v-model实现
    3. 缺点
    v-model默认绑定value属性, 所以v-model只能在表单使用
    4. 原理
    1. 为什么数据能直接在视图显示
    v-model默认绑定了DOM对象的value属性, 当它初次绑定的时候,
    就会触发getter,watcher就会触发, watcher通知Vue生成新的VDOM树,
    再通过render函数进行渲染,生成真实DOM
    2. 为什么视图修改数据就会修改
    当视图修改是, 意味着DOM的value属性值改变,就会触发setter,watcher监听机制就会执行
    watcher通知Vue生成新的VDOM树,再通过render函数进行渲染,生成真实DOM
    代码:

    复制代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    ``` <div id="app"> <input type="text" v-model = "msg"> </div> <script> new Vue({ el: '#app', data: { msg: 'hello vue.js' } }) </script> ```

三、watch
1. 作用:
用来监听数据的变换, 当数据模型 (data选项 M)发生改变时, watch就会触发
2. 使用

两种用法:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
1. key的value值是一个函数 ```javascript new Vue({ watch: { key(value,oldvalue){} } }) ``` 2. key的value值是一个对象 ```javascript new Vue({ watch: { key: { deep: true/false 深入监听, handler(value,oldvalue){} // 监听的处理函数 } } }) ```

watch中的key指的就是data选项中key

代码:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
``` <div id="app"> {{ msg }} </div> <script> new Vue({ el: '#app', data: { msg: 'hello vue.js' }, watch: { msg(){ alert('数据改变了') } } }) </script> ```

最后

以上就是魁梧水池最近收集整理的关于vue.js底层的原理的全部内容,更多相关vue.js底层内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(117)

评论列表共有 0 条评论

立即
投稿
返回
顶部