vue.set

左手的ㄟ右手 2022-05-19 00:24 146阅读 0赞

一：

在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去；

当我们去看vue文档的时候，会发现有这么一句话：**如果在实例创建之后添加新的属性到实例上，它不会触发视图更新**。如下代码：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>vue $set</title>
    <script src="https://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
      姓名：{
       { name }}<br>
        年龄：{
       {age}}<br>
        性别：{
       {sex}}<br>
        说明：{
       {info.content}}
    </div>
    
    <script>
    var data = {
        name: "简书",
        age: '3',
        info: {
            content: 'my name is test'
        }
    }   
    var key = 'content';
    var vm = new Vue({
        el:'#app',
        data: data,
        ready: function(){
            //Vue.set(data,'sex', '男')
            //this.$set('info.'+key, 'what is this?');
        }
    });
    data.sex = '男'；
    </script>
    </body>
    </html>

运行结果：

姓名：简书
    年龄：3
    性别：
    说明：my name is test

为什么会这样呢？当去查对应文档时，你会发现\*\*响应系统 \*\*,把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter,如上示例，将data在控制台打印出来会发现：

![Image 1][]

data打印结果

在age及name都有get和set方法,但是在sex里面并没有这两个方法，因此，设置了sex值后vue并不会自动更新视图；

解决方法：

1、通过Vue.set方法设置data属性，如上：

Vue.set(data,'sex', '男')

2、您还可以使用 vm.$set实例方法，这也是全局 Vue.set方法的别名:

var key = 'content'; //这种主要用于当对象中某个属性值动态生成时处理方式
    this.$set('info.'+key, 'what is this?');
     或
    this.$set('info.content', 'what is this?');

二：

vue教程中有这样一个注意事项：

![Center][]

第一种具体情况如下：

![Center 1][]

运行结果：

![Center 2][]

当利用索引改变数组某一项时，页面不会刷新。解决方法如下：

![Center 3][]

运行结果：

![Center 4][]

三种方式都可以解决，使用Vue.set、vm.$set()或者数组的splice方法。

在做项目的过程中，有个发现，先上代码：

![Center 5][]

第一个数组通过利用下标改变第二项，第二个数组使用$set()方法改变第二项，根据上面的代码，我们会知道：第一个数组的第二项改变不会在页面更新，只有第二个数组的更改会在页面更新。然而结果却是：

![Center 6][]

两个数组的的改变都在页面更新了。。

也就是说，$set()方法调用时，页面会全部更新一遍。

三：

<!DOCTYPE html>  
<html>

<head>  
        <meta charset="utf-8">  
        <title>Vue.set使用</title>  
        <style>  
            .list .active \{  
                background-color: \#E35885;  
            \}  
        </style>  
        <script type="text/javascript" src="js/vue.js"></script>  
    </head>

<body>  
        <div id="app">  
            <button type="button" v-on:click="getList()">获取列表并添加新属性</button>  
            <ul class="list" v-if="showList">  
                <li v-for='(item,index) in List' v-bind:class='\{active:item.active\}' v-on:click="beActive(index)">\{ \{item.name\}\}</li>  
            </ul>  
        </div>

</body>

</html>

[Image 1]: 
[Center]: /images/20220519/0e70d3bedac74de1ab112cccd6512a65.png
[Center 1]: /images/20220519/fafbf516054c41d5b8ba9b6d38ee424e.png
[Center 2]: /images/20220519/6e382a56225e463aa4c7282f8baf0287.png
[Center 3]: /images/20220519/03083c8623c242138c51a2fc2138e22a.png
[Center 4]: /images/20220519/400c7ef1f4b148b4963fcde042246ab1.png
[Center 5]: /images/20220519/32c5c7c3e9ca44cda2980adfbc14f54d.png
[Center 6]: /images/20220519/4aa35bba2e52484f91e469c792b87150.png

vue.set

发表评论取消回复

还没有评论，来说两句吧...

相关阅读