【Vue 开发实战】基础篇 # 8：如何触发组件的更新

说明

【Vue 开发实战】学习笔记。

数据驱动

数据来源（单向的）

状态 data VS 属性 props

• 状态是组件自身的数据
• 属性是来自父组件的数据
• 状态的改变未必会触发更新
• 属性的改变未必会触发更新

例子：

​​index.vue​​ 代码

<template>
    <div id="app">
        <p>
            <button @click="handleNameChange">change this.name</button>
            <button @click="handleInfoChange">change this.info</button>
            <button @click="handleListChange">change this.list</button>
        </p>
        <PropsAndData :info="info" :name="name" :list="list"></PropsAndData>
    </div>
</template>

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

​​PropsAndData.vue​​ 代码

<template>
    <div>
        <p>props.info：{{info}}</p>
        <p>props.name：{{name}}</p>
        <p>props.list：{{list}}</p>
        <p>data.a：{{a}}</p>
        <p>
            <button @click="handleBChange">change data.b</button>
        </p>
    </div>
</template>

<script>export default {
    name: "PropsAndData",
    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 发生了变化，但是并没有触发组件更新");
        }
    },
};</script>

点击这个三个都没有触发组件更新

因为 name 不是响应式，info 对象才是响应式，b 没有被视图使用

响应式更新