前端
一点也不简单

Vue.js进阶之路5(原理、watch)

一、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:

  • 有异步操作
  • 开销(消耗)较大
赞(1) 打赏
未经允许不得转载:专注前端开发和vps技术交流的博客-纸飞机 » Vue.js进阶之路5(原理、watch)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

微信扫一扫打赏