首页 > 专栏 > 前端 > 文章详情
Vue 如何触发组件的更新 发布于:2021-04-25 20:48:54   来源:Vue   查看:34  讨论:0
点击函数触发子组件的更新:如果数据不写在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:触发重新渲染。

评论

  • 匿名