Vue 如何触发组件的更新 - 易塔云建站-模板下载,web开发资源,技术博客

Vue 如何触发组件的更新发布于：2021-04-25 20:48:54 来源：Vue 查看：34 讨论：0

点击函数触发子组件的更新：如果数据不写在return里，就会发生无法响应式绑定的情况。

相关代码如下：

import PropsAndDate from './PropsAndData';
let name = "world"
export default {
    components: {PropsAndDate},
    data() {
        this.name = name;
        return {
            // name: name,
            info: {},
            // info: {
            //     number: undefined
            // },
            list: [],
        }
    },
    methods: {
        handleNameChange() {
            this.name = 'Vue' + Date.now();
            console.log('this.name 发生了变化，但并没有触发子组件的更新', this.name)
        },
        handleInfoChange() {
            this.info.number = 1;
            console.log('this.info 发生了变化，但也没有触发子组件的更新', this.info)
        },
        handleListChange() {
            this.list.push(1, 2, 3);
            console.log('this.list 并没有发生变化，但是触发了子组件将的更新', this.list)
        }
    }
}

如果把data都写在return里，就可以完成响应式绑定。

components: {PropsAndDate},
    data() {
        this.name = name;
        return {
            name: name,
            // info: {},
            info: {
                number: undefined
            },
            list: [],
        }
    },

子组件的代码如下：

export default {
    name: 'PropsAndDate',
    props: {
        info: Object,
        name: String,
        list: Array
    },
    data() {
        return {
            a: "Hello",
            b: "world"
        }
    },
    updated() {
        console.log('触发 PropsAndData updated')
    },
    methods: {
        handleBChange() {
            this.b = 'vue' + Date.now();
            console.log('data.b 发生了变化，但是并没有触发组件更新', this.b)
        }
    }
}

而模板中没有绑定数据 {{ b }} ，所以就不会通知Vu进行组件更新。

分享详细过程：

Vue是如何做更新的？哪些数据需要做依赖收集，哪些数据不需要？

Vue在实例化的时候，会对Data下面的数据做getter和setter的转化。所谓的转化，说直白一点就是，我们队这个数据做了一个中间的代理层，不管你是取数据也好，还是设置数据统一赋值也好，它都会经过这个紫色的代理层，然后执行相应的操作。我们在代理层中，可以做任何的一个事情。这就是我们实例化，对数据做的这样一个转化。

那我们的组件需要渲染的时候，也就是黄色。也就是我们在Render的时候，我们会需要一些Data里面的数据，如果这个数据用到了，就会把这个数据放到Watcher里面，如果没有用到，它就不会进入到这个Watcher里面。

如果你用到了，比如说name，info，list。我们这个Data就会Notify通知这个Watcher，然后再采取更新。
如果你更新了一个在Render里面没有Wacther到的数据，你再改变它的时候，它并不会去通知这个Wacther，也就是说并不会去触发我们的组件的更新Render过程。

这就为什么，属性和数据改变了，而不一定会触发DOM的一个原因。
三个专业名词：
Collect as denpendency：依赖收集。
Notify：通知。
Trigger re-render：触发重新渲染。

上一篇：作用域插槽的理解下一篇：如何优雅的获取跨层级组件实例（不用递归）

评论

最新文章

热门笔记

可以直接扫码关注本站

易塔云建站：15811355317

微信扫一扫，添加好友