(六) -set用法-给目标对象增加一个响应式数据_响应式数据里增加数据-CSDN博客

本文链接：https://blog.csdn.net/weixin_44867717/article/details/104900531

set用法-给目标对象增加一个响应式数据

https://cn.vuejs.org/v2/api/#Vue-set

用法：

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')

注意

对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

Vue.set( target, propertyName/index, value )

参数：
- {Object | Array} target
- {string | number} propertyName/index
- {any} value
返回值：设置的值。

示例

set用法.html中

<body>
    <!-- View -->
    <div id="app">
        <h1>{{ name }}</h1>
        <h1>{{ age }}</h1>

        <div>
            <input type="text" v-model="name">
        </div>
        <span v-text="name"></span>
        <input type="text" v-model="age">

        <hr> {{ dog.name }}
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        // ViewModel
        const vm = new Vue({
            el: '#app',
            // Model
            data: {
                name: 'zs',
                age: 18,
                dog: {}
            }
        })

        // vm.test = 'abc'
        // vm.dog.name = 'byd'

        // 不允许使用set方法给vue实例增加新的成员
        // set方法内部调用了defineProperty把新增的name属性设置为getter/setter
        Vue.set(vm.dog, 'name', '新增xxxx')
    </script>
</body>