学习笔记(13):Vue2.x从入门到实战-Vue.set全局操作

立即学习:https://edu.csdn.net/course/play/6823/135323?utm_source=blogtoedu

Vue.set 全局操作

1、外部引用数据

<div id="app">
    {{count}}
</div>

var OutData={
        count:1
    }
    var app=new Vue({
        el:'#app',
        data:OutData//外部声明数据对象
    })

2、添加一个点击事件改变外部数据

<div id="app">
    {{count}}
</div>
<p><button οnclick="add()">add</button></p>

2.1用Vue.set改变

function add() {
        Vue.set(OutData,'count',2);//用Vue.set进行改变数据
    }

2.2用Vue声明对象的属性改变数据

function add() {
        app.count++;//用Vue声明对象的属性
    }

2.3直接操作外部数据

function add() {
        OutData.count++;//直接操作外部数据
    }

从以上的操作来看Vue.set的操作其他的操作也能完成，但是Vue.set也有独到的用处。由于Javascript的限制，Vue不能自动检测以下变动的数组。

• 当你利用索引直接设置一个项时，vue不会为我们自动更新。
• 当你修改数组的长度时，vue不会为我们自动更新。

上一段代码

<div id="app">
    {{count}}
    <ul>
        <li v-for="item in array">{{item}}</li>
    </ul>
</div>
<p><button οnclick="add()">add</button></p>

<script>
    var OutData={
        count:1,
        array:['111','222','333']
    }
    function add() {
        //Vue.set(OutData,'count',2);//用Vue.set进行改变数据
        //app.count++;//用Vue声明对象的属性
        //OutData.count++;//直接操作外部数据
       app.array[1]='aaa';
        
    }
    var app=new Vue({
        el:'#app',
        data:OutData//外部声明数据对象
    })
</script>

用以上的方法改变数组界面是不会更新数据的，这是我们就要用到Vue.set(app.array,1,'bbb')进行改变，这时数组才能更新。

新手一枚，若有不足，请指正！