点击函数触发子组件的更新:如果数据不写在return里,就会发生无法响应式绑定的情况。
nUR易塔云建站-模板下载,web开发资源,技术博客
nUR易塔云建站-模板下载,web开发资源,技术博客
nUR易塔云建站-模板下载,web开发资源,技术博客
nUR易塔云建站-模板下载,web开发资源,技术博客nUR易塔云建站-模板下载,web开发资源,技术博客相关代码如下:nUR易塔云建站-模板下载,web开发资源,技术博客
import PropsAndDate from './PropsAndData';nUR易塔云建站-模板下载,web开发资源,技术博客
let name = "world"nUR易塔云建站-模板下载,web开发资源,技术博客
export default {nUR易塔云建站-模板下载,web开发资源,技术博客
components: {PropsAndDate},nUR易塔云建站-模板下载,web开发资源,技术博客
data() {nUR易塔云建站-模板下载,web开发资源,技术博客
this.name = name;nUR易塔云建站-模板下载,web开发资源,技术博客
return {nUR易塔云建站-模板下载,web开发资源,技术博客
// name: name,nUR易塔云建站-模板下载,web开发资源,技术博客
info: {},nUR易塔云建站-模板下载,web开发资源,技术博客
// info: {nUR易塔云建站-模板下载,web开发资源,技术博客
// number: undefinednUR易塔云建站-模板下载,web开发资源,技术博客
// },nUR易塔云建站-模板下载,web开发资源,技术博客
list: [],nUR易塔云建站-模板下载,web开发资源,技术博客
}nUR易塔云建站-模板下载,web开发资源,技术博客
},nUR易塔云建站-模板下载,web开发资源,技术博客
methods: {nUR易塔云建站-模板下载,web开发资源,技术博客
handleNameChange() {nUR易塔云建站-模板下载,web开发资源,技术博客
this.name = 'Vue' + Date.now();nUR易塔云建站-模板下载,web开发资源,技术博客
console.log('this.name 发生了变化,但并没有触发子组件的更新', this.name)nUR易塔云建站-模板下载,web开发资源,技术博客
},nUR易塔云建站-模板下载,web开发资源,技术博客
handleInfoChange() {nUR易塔云建站-模板下载,web开发资源,技术博客
this.info.number = 1;nUR易塔云建站-模板下载,web开发资源,技术博客
console.log('this.info 发生了变化,但也没有触发子组件的更新', this.info)nUR易塔云建站-模板下载,web开发资源,技术博客
},nUR易塔云建站-模板下载,web开发资源,技术博客
handleListChange() {nUR易塔云建站-模板下载,web开发资源,技术博客
this.list.push(1, 2, 3);nUR易塔云建站-模板下载,web开发资源,技术博客
console.log('this.list 并没有发生变化,但是触发了子组件将的更新', this.list)nUR易塔云建站-模板下载,web开发资源,技术博客
}nUR易塔云建站-模板下载,web开发资源,技术博客
}nUR易塔云建站-模板下载,web开发资源,技术博客
}
nUR易塔云建站-模板下载,web开发资源,技术博客如果把data都写在return里,就可以完成响应式绑定。
nUR易塔云建站-模板下载,web开发资源,技术博客
components: {PropsAndDate},nUR易塔云建站-模板下载,web开发资源,技术博客
data() {nUR易塔云建站-模板下载,web开发资源,技术博客
this.name = name;nUR易塔云建站-模板下载,web开发资源,技术博客
return {nUR易塔云建站-模板下载,web开发资源,技术博客
name: name,nUR易塔云建站-模板下载,web开发资源,技术博客
// info: {},nUR易塔云建站-模板下载,web开发资源,技术博客
info: {nUR易塔云建站-模板下载,web开发资源,技术博客
number: undefinednUR易塔云建站-模板下载,web开发资源,技术博客
},nUR易塔云建站-模板下载,web开发资源,技术博客
list: [],nUR易塔云建站-模板下载,web开发资源,技术博客
}nUR易塔云建站-模板下载,web开发资源,技术博客
},
nUR易塔云建站-模板下载,web开发资源,技术博客子组件的代码如下:
nUR易塔云建站-模板下载,web开发资源,技术博客
export default {nUR易塔云建站-模板下载,web开发资源,技术博客
name: 'PropsAndDate',nUR易塔云建站-模板下载,web开发资源,技术博客
props: {nUR易塔云建站-模板下载,web开发资源,技术博客
info: Object,nUR易塔云建站-模板下载,web开发资源,技术博客
name: String,nUR易塔云建站-模板下载,web开发资源,技术博客
list: ArraynUR易塔云建站-模板下载,web开发资源,技术博客
},nUR易塔云建站-模板下载,web开发资源,技术博客
data() {nUR易塔云建站-模板下载,web开发资源,技术博客
return {nUR易塔云建站-模板下载,web开发资源,技术博客
a: "Hello",nUR易塔云建站-模板下载,web开发资源,技术博客
b: "world"nUR易塔云建站-模板下载,web开发资源,技术博客
}nUR易塔云建站-模板下载,web开发资源,技术博客
},nUR易塔云建站-模板下载,web开发资源,技术博客
updated() {nUR易塔云建站-模板下载,web开发资源,技术博客
console.log('触发 PropsAndData updated')nUR易塔云建站-模板下载,web开发资源,技术博客
},nUR易塔云建站-模板下载,web开发资源,技术博客
methods: {nUR易塔云建站-模板下载,web开发资源,技术博客
handleBChange() {nUR易塔云建站-模板下载,web开发资源,技术博客
this.b = 'vue' + Date.now();nUR易塔云建站-模板下载,web开发资源,技术博客
console.log('data.b 发生了变化,但是并没有触发组件更新', this.b)nUR易塔云建站-模板下载,web开发资源,技术博客
}nUR易塔云建站-模板下载,web开发资源,技术博客
}nUR易塔云建站-模板下载,web开发资源,技术博客
}
nUR易塔云建站-模板下载,web开发资源,技术博客而模板中没有绑定数据 {{ b }} ,所以就不会通知Vu进行组件更新。nUR易塔云建站-模板下载,web开发资源,技术博客
nUR易塔云建站-模板下载,web开发资源,技术博客
分享详细过程:nUR易塔云建站-模板下载,web开发资源,技术博客
nUR易塔云建站-模板下载,web开发资源,技术博客
nUR易塔云建站-模板下载,web开发资源,技术博客Vue是如何做更新的?哪些数据需要做依赖收集,哪些数据不需要?nUR易塔云建站-模板下载,web开发资源,技术博客nUR易塔云建站-模板下载,web开发资源,技术博客Vue在实例化的时候,会对Data下面的数据做getter和setter的转化。所谓的转化,说直白一点就是,我们队这个数据做了一个中间的代理层,不管你是取数据也好,还是设置数据统一赋值也好,它都会经过这个紫色的代理层,然后执行相应的操作。我们在代理层中,可以做任何的一个事情。这就是我们实例化,对数据做的这样一个转化。nUR易塔云建站-模板下载,web开发资源,技术博客nUR易塔云建站-模板下载,web开发资源,技术博客那我们的组件需要渲染的时候,也就是黄色。也就是我们在Render的时候,我们会需要一些Data里面的数据,如果这个数据用到了,就会把这个数据放到Watcher里面,如果没有用到,它就不会进入到这个Watcher里面。nUR易塔云建站-模板下载,web开发资源,技术博客
nUR易塔云建站-模板下载,web开发资源,技术博客
如果你用到了,比如说name,info,list。我们这个Data就会Notify通知这个Watcher,然后再采取更新。nUR易塔云建站-模板下载,web开发资源,技术博客
如果你更新了一个在Render里面没有Wacther到的数据,你再改变它的时候,它并不会去通知这个Wacther,也就是说并不会去触发我们的组件的更新Render过程。nUR易塔云建站-模板下载,web开发资源,技术博客
nUR易塔云建站-模板下载,web开发资源,技术博客
这就为什么,属性和数据改变了,而不一定会触发DOM的一个原因。nUR易塔云建站-模板下载,web开发资源,技术博客
三个专业名词:nUR易塔云建站-模板下载,web开发资源,技术博客
Collect as denpendency:依赖收集。nUR易塔云建站-模板下载,web开发资源,技术博客
Notify:通知。nUR易塔云建站-模板下载,web开发资源,技术博客
Trigger re-render:触发重新渲染。