Vue学习：监测数据改变原理--Vue.set

最新推荐文章于 2024-02-23 10:42:00 发布

¡Venceremo

最新推荐文章于 2024-02-23 10:42:00 发布

阅读量152

点赞数

分类专栏： Vue 文章标签： vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_47295886/article/details/129016249

版权

Vue 专栏收录该内容

155 篇文章 1 订阅

订阅专栏

文章详细介绍了Vue.js中Vue.set的用法，它是实现响应式更新页面的关键。当需要向已有对象添加属性并确保该属性是响应式的，可以使用Vue.set。通过在Vue实例的数据对象上添加属性并触发视图更新，避免了直接修改数据导致页面不更新的问题。文中提供了一个例子，展示了如何在按钮点击事件中使用Vue.set添加学生性别并实时更新页面。

摘要由CSDN通过智能技术生成

Vue.set:set是响应式的重要原因，通过set的改变，实现页面的更新

如果响应临时在页面九年增加元素，如何让该元素在页面显示

很明显，直接在vm上加是没有set 的无法进行页面的显示

我们是通过数据代理实现的vm._data上试试，也是

Vue.set(往什么对象，名称，值）注意使用单引号可以简化因为存在数据代理vm._data.student=vm.student

Vue.set(vm._data.student,'sex','男')

Vue.set(vm.student,'sex','男')

vm.$set(vm._data.student,'sex','男')

vm.$set(vm.student,'sex','男')

验证响应式

使用按钮进行添加学生性别

通过Vue.set(this.student,'sex','男') 或者this.$set(this.student,'sex','男')

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript" src="./js引入/测试版本/vue.js"></script>
</head>

<body>
    <!-- 计算属性实现 -->
    <!-- 准备容器 -->
    <div id='root'>
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{adress}}</h2>
        <hr>
        <h2>学生姓名：{{student.name}}</h2>
        <button @click="addSex">点击添加性别</button>
        <h2 v-if="student.sex">性别：{{student.sex}}</h2>
        <h2>真实年龄：{{student.age.rAge}} &nbsp;&nbsp;&nbsp;对外年龄：{{student.age.sAge}}</h2>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
        

    </div>
    <script>
        const vm=new Vue({
            el: '#root',
            data: {
                name: "xxx大学",
                adress:"浙江省xxx路",
                student:{
                    name: "Tom",
                    age:{
                    rAge:19,
                    sAge:30
                },
                friends:[
                    {name:'sha',age:36},
                    {name:'asml',age:36}                
                ]
                }  
                

            },
            methods: {
                addSex() {
                    //Vue.set(this.student,'sex','男') 
                    this.$set(this.student,'sex','男')

                }
            },

        });
    </script>
</body>

</html>

存在局限：给data里面直接添加对象

Vue.set(vm._data,'leader','xajos')

出错

Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.--------------------不允许添加响应式的数据在Vue实例上

所以Vue.set只可以给data里面的某一个对象添加属性，而不能给data追加属性

vm不允许是Vue.se的目标，并且vm.data也不允许必须在外面包含一个属性或者直接使用