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

说明

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

数据驱动

数据来源（单向的）

状态 data VS 属性 props

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

例子：

index.vue 代码

<template>
    <div id="app">
        <p>
            <button @click="handleNameChange">change this.namebutton>
            <button @click="handleInfoChange">change this.infobutton>
            <button @click="handleListChange">change this.listbutton>
        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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

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.bbutton>
        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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

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

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

响应式更新