vue.js进阶之路——深入响应式原理
vue响应式原理
vue框架属于vm框架一种,关注于v视图层和m数据模型层,数据层的变化会引起关联组件的视图层变化,故前端开发专注于数据data的开发。
Dom元素渲染更新机制
vue更新dom元素是异步执行的,数据data发生变化就会开启一个watcher监听,在更新dom缓冲期间若判断为同一个watcher的,只会放入异步更新dom队列中一次,然后异步队列会按顺序执行触发更新dom操作。vue内部异步队列会依次尝试Promise.then、MutationObserver 和 setImmediate,最后都不支持则会用setTimeout(fn, 0) 代替。
data响应——检测不到对象的添加和删除
vue在实例化时,会对data里的数据利用Objec.defineProperty的getter/setter将其转化为响应式数据,即在对其数据赋值时会触发render更新dom。对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性
var vm = new Vue({
data:{
a:1
}
})
// `vm.a` 是响应式的
vm.b = 2
// `vm.b` 是非响应式的
但是,可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。例如,对于:
Vue.set(vm.someObject, ‘b’, 2)
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
案例如下
<template>
<div class="reponse-demo">
<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-input v-model="ruleForm.region"></el-input>
</el-form-item>
<el-form-item label="活动形式" prop="newProp">
{{ruleForm.newProp}}
</el-form-item>
<el-form-item label="活动方式" prop="newProp">
{{ruleForm.obj?ruleForm.obj.type:''}}
</el-form-item>
<el-form-item label="活动方式" prop="newProp">
{{ruleForm.obj.pro}}
</el-form-item>
</el-form>
<div class="update-test">
<el-button type="primary" @click="update()">更新一级对象</el-button>
<el-button type="primary" @click="update1()">更新二级对象</el-button>
</div>
</div>
</template>
data() {
return {
ruleForm: {
name: 'default name',
region: 'default region',
obj: {pro: 'default obj pro'}
}
};
},
methods: {
update() {
// 以下方式监听不到ruleForm新增属性newProp的变化,或删除属性
this.ruleForm.newProp = 'new prop'
delete this.ruleForm.name
Object.assign(this.ruleForm, {newProp: 'new prop'})
// 以下方式可以监听到ruleForm新增属性newProp的变化
// 方式一、改变根节点ruleForm,指向引用地址变了
// 这种方式常用cloneDeep()
this.ruleForm = {
name: 'new name'
}
this.ruleForm.newProp = 'new prop'
// 方式二、assign两种用法,一种加入可监听属性region并引发变化才可以
// 另一种改变对象地址
Object.assign(this.ruleForm, {
region: 'new region', newProp: 'new prop'})
this.ruleForm = Object.assign({}, this.ruleForm, {
region: 'new region', newProp: 'new prop'})
// 方式三、 $set
this.$set(this.ruleForm, 'newProp', 'new prop')
},
update1() {
// init定义data时 type没有定义
this.ruleForm.obj.type = 'new type' // 非响应
this.ruleForm.obj = {type: 'new type'} // 响应
this.ruleForm = cloneDeep({ name: 'new name',
region: 'new region',
obj: {type: 'new type'}}) // 响应
this.$set(this.ruleForm.obj, 'type', 'new type') // 响应
}
}
data响应——检测不到数组的变化
vue中计算属性computed的响应
vue中属性props的响应
后续更新。。。