Vue知识点总结(21)——对象的变更检测(超级详细)
vue官方文档中的深入响应式原理中有提到过,对于检测变化的一些注意事项。
由于 JavaScript 的限制,Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。
这句话是啥意思呢?
我们先看一个小例子。
<div id="app">
<h3>{{user.name}},{{user.age}}</h3>
<button @click='handlerAdd'>添加属性</button>
</div>
<script>
new Vue({
el:'#app',
data:{
user:{}
},
created () {
this.user.name = 'Ray'
},
methods: {
handlerAdd(){
console.log('触发点击事件');
this.user.age = 20; }
}
});
</script>
首先我们在data中写了一个空的user对象,created钩子函数中,我们在user对象中添加了一个name属性,赋值为Ray。
然后我们写了一个按钮,重点的就是这个按钮的操作,我们想在这个按钮里继续添加一个age属性,赋值为20。
按照正常的逻辑来说,这应该是没问题的。
下面我们看看页面的渲染情况。
在控制台输出了语句,说明我们触发了点击事件,但是age的值并没有被渲染到页面上。
这是咋回事呢,这就是vue官方提示的注意事项。
由于 JavaScript 的限制,Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。
下面我们看一下如何解决这个问题?
vue提供了一个API,Vue.$set(object,key,value),用于避免这种问题的发生。
<div id="app">
<h3>{{user.name}},{{user.age}}</h3>
<button @click='handlerAdd'>添加属性</button>
</div>
<script>
new Vue({
el:'#app',
data:{
user:{}
},
created () {
this.user.name = 'Ray'
},
methods: {
handlerAdd(){
console.log('触发点击事件');
this.$set(this.user,'age',20); }
}
});
</script>
我们使用vue提供的这个API之后,再看页面的渲染结果。
果然,可以正常地显示age属性的内容。
但是上面这种API,Vue.$set(object,key,value),一次只能添加一个属性。如果我们想一下添加多组属性呢?
vue也为我们提供了对策。
<div id="app">
<h3>{{user.name}},{{user.age}}</h3>
<button @click='handlerAdd'>添加属性</button>
</div>
<script>
new Vue({
el:'#app',
data:{
user:{}
},
created () {
this.user.name = 'Ray'
},
methods: {
handlerAdd(){
console.log('触发点击事件');
this.user = Object.assign({},this.user,{
age:20,
phone:18331092918
})
}
}
});
</script>
Object.assign({}, this.someObject, { key1: value1, key2: value2 })
下面我们看一下页面的展示效果:
果然,非常的nice。
今天这个知识点还是比较重要的,无论是面试还是我们日常的开发,都可能会踩这个坑。
有微信小程序课设、毕设需求联系个人QQ:505417246
关注下面微信公众号,可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号,请大家多多关注,谢谢!
相关文章
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- VUE - mapState 辅助函数(简化)
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- EasyDSS RTMP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
- Vue + webpack 项目实践
- vue.js3: i18n根据浏览器语言自动选择当前语言(vue@3.2.37 / vue-i18n@9.2.0-beta.36)
- [FE] G2Plot 在 Vue 中使用 CDN 方式避免构建时增大 js 体积
- 一个典型的Vue应用的App.vue
- vue-router路由的安装、配置、具体用法和Vue-router学习笔记
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- 前端实操案例丨如何实现JS向Vue传值
- vue 使用定时器setInterval
- 计算机毕设 SSM Vue的旅游信息发布管理系统(含源码+论文)
- Vue中组件化编码使用、实现组件之间的参数传递(实战练习二)
- Vue——组件
- Vue中vue-i18n结合element-ui实现国际化
- 055:vue+openlayers的select-modify-snap功能展示(代码示例)
- vue父组件传值和子组件触发父组件方法
- Vue面试中,经常会被问到的面试题/Vue知识点整理
- vue点击取消再点击选中(单选)
- 【三十天精通Vue 3】第二天 Vue 3带来的新特性