Vue.js---响应式原理

目录

Vue的响应式效果：

Vue的响应式原理：

数组元素单独修改页面不会响应式改变的原因：

Vue内置API：Vue.set()：

Vue中的数组操作方法：

一些需要注意的点：

欢迎指正！

---

Vue的响应式效果：

        我们知道，当Vue的实例对象中的data元素发生改变时，页面中用到该元素的地方会进行重新解析模板。即更改数据会影响页面的显示。但对 数组元素中的元素 通过数组下标的形式进行更改时，页面不会进行响应式变化。即：

    <div id="root">
        <button @click="changehobby">将第一个爱好改为打游戏</button>
        <ul>
            <li v-for="h in hobby">{
  {h}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                hobby: ['吃饭', '睡觉', '打豆豆']
            },
            methods: {
                changehobby() {
                    this.hobby[0] = '打游戏'
                }
            }
        })
    </script>

        当按下按钮时，页面不会响应式地将 “吃饭” 改为 “打游戏”，但通过控制台我们可以发现，在hobby数组内部已经进行了修改。

         但我们将该数组以对象的形式储存时会发现，页面又会正常进行响应式变化。

    <div id="root">
        <button @click="changehobby">将第一个爱好改为打游戏</button>
        <ul>
            <li v-for="h in hobby">{
  {h}}</li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: '#root'