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