Vue.js进阶之路5

Posted 2021-09-08 纸 飞机

一、vue深入响应式原理

首先,接受一个概念:数据模型-----vm中的data选项

1.状态管理:

什么是状态管理?

我们使用一个数据去管理视图中的一个部分， 那么这条数据就叫做状态， 这种管理模式就叫做状态管理

2.什么是深入响应式原理(重点)

a.当视图模型（VM）中的数据模型（M）发生改变时， 视图（V）就会进行更新

b.Vue通过watcher将data中的属性全部使用Object.definePropery变成getter和setter,当属性值发生改变的时候， 就会触发， 然后wather就会触发， 告诉视图（V）进行重新渲染

c.数据必须放在data选项中才能进行深入响应式

底层原理:核心使用的是es5的 Object.definePropery 方法,这个方法不支持ie8以及以下,这也是为什么Vue不兼容ie8以下的原因

Object.defineProperty(obj,obj.attr,descriptor)

参数:

obj:要在其上定义属性的对象。

prop:要定义或修改的属性的名称。

descriptor:将被定义或修改的属性描述符。它是一个对象， 这个对象有哪些构成？

• configurable： 决定了对象的key是否可删除
• enumerable： 决定了对象是否可遍历（枚举）
• writeable: 决定了对象的key的value是否可修改

存储器:

• get函数 ----起了个名字getter 设置当前对象的key的初始值
• set函数 ----起了个名字setter 修改当前对象的key的值

3.总结:

什么是深入响应式原理？

深入响应式原理是利用了数据劫持和订阅发布的模式, 当数据模型发生改变的时候， 视图就会响应的进行更新， 那么深入响应式原理是利用es5的Object.defineProperty中个getter/setter来进行数据的劫持的

名称解释：

1. 数据劫持： Object.defineProperty中的getter/setter ， 然后在执行watcher
2. 订阅发布：事件（自定义事件）
3. 订阅： 事件的声明 vm.$on
4. 发布： 事件的触发 vm.$emit

非响应式情况:

什么是非响应式?

在vm模型的data外定义的属性， 就是非响应式属性， 非响应式属性， 属性值更新， 视图不会更新

非响应式属性如何变成响应式属性?

思维： 将非响应式属性合并到响应式属性身上

解决： 利用了Vue提供的 Vue.set/this.$set(vm.dataattr,prop,value)

Vue.set底层原生是什么？

Object.assign(目标对象，对象1， 对象2，对象3)

二、Vue双向数据绑定原理

v-mode 双向数据绑定

什么是双向数据绑定:数据改 ， 视图更;视图改， 数据更

实现:使用v-model实现

缺点:v-model默认绑定value属性， 所以v-model只能在表单使用

原理:

1.为什么数据能直接在视图显示

v-model默认绑定了DOM对象的value属性， 当它初次绑定的时候， 就会触发getter,watcher就会触发， watcher通知Vue生成新的VDOM树， 再通过render函数进行渲染,生成真实DOM

2.为什么视图修改数据就会修改

当视图修改是， 意味着DOM的value属性值改变，就会触发setter,watcher监听机制就会执行watcher通知Vue生成新的VDOM树，再通过render函数进行渲染,生成真实DOM

三、watch

watch的作用

用来监听数据的变换， 当数据模型 （data选项 M）发生改变时， watch就会触发

使用方法

1.普通监听(key的value值是一个函数 )

new Vue({
     watch: {
        key(value,oldvalue){}          
     }
 })

2.深入监听(key的value值是一个对象)

new Vue({
    watch: {
         key： {
             deep: true/false 深入监听,
             handler(value,oldvalue){}    // 监听的处理函数              
            }       
       }
})

注意:watch中的key指的就是data选项中key

案例:

我要监听数据模型(data)中的msg

<div id="app">
    {{ msg }}
 </div>

new Vue({
    el: '#app',
    data: {
      msg: 'hello vue.js'
    },
    watch: {
      msg(){
        alert('数据改变了')//当data中msg一发生改变,就会弹出数据改变了
      }
    }
  })

watch和computed(计算属性)以及methods比较

methods:事件

computed:以下情况使用

• 有逻辑
• 要像变量一样使用

watch:

• 有异步操作
• 开销(消耗)较大