Vue的响应式及相关问题

最新推荐文章于 2024-03-15 16:38:25 发布

桃花扇J

最新推荐文章于 2024-03-15 16:38:25 发布

阅读量393

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44584442/article/details/109155537

版权

Vue 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

1.概念

2.页面何时渲染

3.vm.$nextTick 和 Vue.nextTick

4.不发生重新渲染的情况

5. 响应式更新数组和对象

1.概念

Vue响应式指当数据变化时，页面会重新渲染，如下例

<body>
    <div id="app">
        {{ sentence}}
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            sentence: '自由就是不再寻求认可'
        }
    })
</script>

【结果】改变 sentence 的值，页面重新渲染

【注】当创建vue实例时，vue会将data中的成员代理给vue实例，目的是为了实现响应式，监控数据变化，执行某个监听函数

2.页面何时渲染

Vue更新DOM的操作是异步执行的，只要侦听到数据变化，将开启一个异步队列，如果一个数据被多次变更，那么只会被推入到队列中一次，这样可以避免不必要的计算和DOM操作

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

const vm = new Vue({
    el: '#app',
    data: {
        bookList: ['被讨厌的勇气', '没有凶手的杀人夜', '亲密关系']
    }
})
vm.bookList[1] = 'JavaScript高级程序设计';
console.log(vm.bookList[1]);    // 此时数据已经更改
console.log(vm.$el.innerHTML);  //但是页面内容还没有更改

【结果】

3.vm.$nextTick 和 Vue.nextTick

1）在DOM更新后，会立刻执行 vm.$nextTick 和 Vue.nextTick，所以可以利用它们看到数据更改后，立刻看到渲染后页面的值

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

const vm = new Vue({
    el: '#app',
    data: {
        bookName: '被讨厌的勇气'
    }
})
vm.bookName = 'JavaScript高级程序设计';
console.log(vm.bookName);    // 此时数据已经更改
console.log(vm.$el.innerHTML);  
vm.$nextTick(()=>{
    console.log(vm.$el.innerHTML);  
})

【结果】

2）vm.$nextTick 和 Vue.nextTick 可以当作Promise使用

const vm = new Vue({
    el: '#app',
    data: {
        bookName: '被讨厌的勇气'
    }
})
vm.bookName = 'JavaScript高级程序设计';
console.log(vm.bookName);    // 此时数据已经更改
vm.$nextTick().then(()=>{
    console.log(vm.$el.innerHTML);  
})
Vue.nextTick().then(()=>{
    console.log(vm.$el.innerHTML);  
})

【结果】

3）vm.$nextTick 和 Vue.nextTick 的区别

vm.$nextTick 内部函数的 this 指向 Vue 实例对象，Vue.nextTick 内部函数的 this 指向 window

4）nextTick 的实现

异步任务分为宏任务（macro）和微任务（micro），微任务执行在前，宏任务执行在后，在 nextTick 的实现源码中，会先判断是否支持微任务，不支持后才会执行宏任务

  if(typeof Promise !== 'undefined') {
    // 微任务
    // 首先看一下浏览器中有没有promise
    // 因为IE浏览器中不能执行Promise
    const p = Promise.resolve();

  } else if(typeof MutationObserver !== 'undefined') {
    // 微任务
    // 突变观察
    // 监听文档中文字的变化，如果文字有变化，就会执行回调
    // vue的具体做法是：创建一个假节点，然后让这个假节点稍微改动一下，就会执行对应的函数
  } else if(typeof setImmediate !== 'undefined') {
    // 宏任务
    // 只在IE下有
  } else {
    // 宏任务
    // 如果上面都不能执行，那么则会调用setTimeout
  }

4.不发生重新渲染的情况

1）更改的数据必须是存在的数据，否则不能重新渲染页面【例1】；

【例1】不会报错，但是也不会渲染页面，因为监听不到这个值

<div id="app">
    {{ book.sentence }}
</div>

const vm = new Vue({
    el: '#app',
    data: {
        book: {
            name: '被讨厌的勇气',
            writer: '岸见一朗',
        }
    }
})
vm.book.setence="触手可及但互不干扰"

2）更改的数据必须是已渲染过的数据，否则从性能角度考虑，不会重新渲染【例2】；

【例2】

<div id="app">
    {{ book.writer }}
</div>

const vm = new Vue({
    el: '#app',
    data: {
        book: {
            name: '被讨厌的勇气',
            writer: '岸见一朗',
        }
    }
})
vm.book.name="JavaScript高级程序设计"

3）利用索引直接设置一个数组项时不会重新渲染【例3】；

【例3】

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

const vm = new Vue({
    el: '#app',
    data: {
        bookList:['被讨厌的勇气','没有凶手的杀人夜','亲密关系']
    }
})
vm.bookList[3]="JavaScript高级程序设计"

4）修改数组长度时不会重新渲染【例4】；

【例4】

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

const vm = new Vue({
    el: '#app',
    data: {
        bookList: ['被讨厌的勇气', '没有凶手的杀人夜', '亲密关系']
    }
})
vm.bookList.length = 0;

5）添加或删除对象时不会重新渲染【例5】；

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

const vm = new Vue({
    el: '#app',
    data: {
        bookList: ['被讨厌的勇气', '没有凶手的杀人夜', '亲密关系']
    }
})
vm.bookList[3] = 'JavaScript高级程序设计';
delete vm.bookList[2];

5. 响应式更新数组和对象

（1）数组

1）利用数组方法 pop、pop、shift、unshift、splice、sort、reverse

2）利用vm.$set 或 Vue.set 实例方法，vm.$set(object, propertyName, value)

3）利用vm.$delete或 Vue.delete删除数组中的某一项

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

const vm = new Vue({
    el: '#app',
    data: {
        bookList: ['被讨厌的勇气', '没有凶手的杀人夜', '亲密关系']
    }
})
vm.bookList.push('为奴十二年');
vm.$delete(vm.bookList, 2)
vm.$set(vm.bookList, 3, '小王子')

【结果】

（2）对象

1）添加利用 vm.$set 或 Vue.set 实例方法

2）删除利用vm.$delete或 Vue.delete

桃花扇J

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue的响应式及相关问题

目录1.概念2.页面何时渲染3.vm.$nextTick 和Vue.nextTick4.不发生重新渲染的情况5. 响应式更新数组和对象1.概念Vue响应式指当数据变化时，页面会重新渲染，如下例<body> <div id="app"> {{ sentence}} </div></body><script src="./vue.js"></script><sc.
复制链接

扫一扫