【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 没有被视图使用

响应式更新