vue.js中响应式原理和双向数据绑定原理

1.首先,我们来了解一下什么叫状态管理?

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

2.然后我们再了解一下什么叫Object.defiendProperty。

Object.defineProperty( obj , obj.attr , descriptor )
参数:
obj
要在其上定义属性的对象。

prop
要定义或修改的属性的名称。对象中的属性

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

configurable: 决定了对象的key是否可删除
enumerable: 决定了对象是否可遍历(枚举)
writeable: 决定了对象的key的value是否可修改

存储器://主要内容
get函数 ----起了个名字getter 设置当前对象的key的初始值
set函数 ----起了个名字setter 修改当前对象的key的值


Object.defineProperty(obj,'name',{
    //存储器
    //get函数,getter
    get(){
        //要求必须有返回值
        return '骏哥'
    },
    //set函数,setter
    set(value){ //value就是修改后的对象的key的value
        console.log('set')
        console.log(value);
        document.querySelector('#app').innerHTML = value
}



watcher监听

想要了解响应式原理那肯定避不开wather监听函数,因为vue的底层就是靠这个函数去监听然后实现数据驱动视图的

watch

  1. 作用:
    用来监听数据的变换, 当数据模型 (data选项 M)发生改变时, watch就会触发
  2. 使用
    两种用法:1.key的值是一个函数,2.key的值是一个对象
  • . key的value值是一个函数 //一般用法
new Vue({
    watch: {
        key(value,oldvalue){}//可以传入参数,一个是新的值,一个是旧的值
    }
})
  • . key的value值是一个对象 //比较深入的用法,深入监听表示会监听对象里每一个属性的变化
new Vue({
    watch: {
        key: {
            deep: true/false 深入监听,
            handler(value,oldvalue){} // 监听的处理函数
        }   
    }
})

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

3.深入响应式原理:

  1. 当视图模型(VM)中的数据模型(M)发生改变时, 视图(V)就会进行更新

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

  3. 数据必须放在data选项中才能进行深入响应式
    底层原理:
    核心使用的是es5的 Object.assign 方法,这个方法不支持ie8以及以下
    *

4.非响应式想变成响应式数据

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

解决非响应式想要变成响应式的数据
Vue.set(vm.someObj,prop,value)
//someObject就是data中的key;prop是这个key代表的对象里的的某个属性,value是属性值

this.$set(vm.someObj,prop,value)
//同上

总结

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

什么叫数据劫持?
数据劫持: Object.defineProperty中的getter/setter , 数据改变就执行watcher

订阅发布:事件(自定义事件)
订阅: 事件的声明 vm. o n 发 布 : 事 件 的 触 发 v m . on 发布: 事件的触发 vm. onvm.emit

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

  2. 非响应式属性如何变成响应式属性
    思维: 将非响应式属性合并到响应式属性身上
    解决: 利用了Vue提供的 Vue.set/this.$set(vm.dataattr,prop,value)

  3. Vue.set底层原生是什么?//合并对象。jquery中的$.extend也可以合并对象
    Object.assign(目标对象,对象1, 对象2,对象3)

vue双向数据绑定原理

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

watcher,computed和methods的区别

1.methods: 一般用于实际事件

2.computed:

  1. 有逻辑 2. 要像变量一样使用 , 这个时候选computed

3.watch:

  1. 有异步操作 2. 开销较大

:key

vue.js中的v-for是惰性的,如果不给他加上唯一属性key的话,下一个与他类似的标签会继承上一个的属性,导致不必要的麻烦;
下面是一个案例,先把:key="item.id"注释掉,如果删除上一个li,下一个li会继承上一个的属性


<body>
    <div id="app">
        <ul>
            <li v-for = " (item,index) in list " :key = "item.id">
            <p> {{item.name}} </p>
            <button @click = "remove(index)"> 删除                            </button>
            <button @click = "changeStyle"> 修改样式                        </button>
            </li>
        </ul>
    </div>
</body>




new Vue({
    el: '#app',
    data: {
    list: [
        {
            id: 1,
            name: 'zhangjun'
        },
        {
            id: 2,
            name: 'yanyabing'
        }
        ]
    },
    methods: {
        remove(index){
        this.list.splice(index,1)
    },
    changeStyle(e){
        e.target.parentNode.style.background = 'red' //我是为了给你举例, 这种写法以后不要出现
    }
    }
})



Logo

前往低代码交流专区

更多推荐