weex-使用Vue.set设置属性和使用this.xxx设置属性的区别

简介: weex-使用Vue.set设置属性和使用this.xxx设置属性的区别

在使用weex过程中,免不了要自定义组件,或者说封装子控件,这时候需要把父组件的一些值传递到子控件中并作出相应的操作,这时候就要使用props来进行传值,但是在赋值的时候,具体通过Vue.set来修改属性还是通过this.xxxx来修改是一个问题,不熟悉的人很容易被困扰到,下面博主将详细讲解下这两种赋值的使用方法和条件:


1.Vue.set

1.png

此截图来自于vue官网,从这里可以看到vue.set的使用方法和参数特质,限制比较严格,之所以用vue.set是为了避开vue不能检测属性被添加的限制,简而言之就是,vue本身不能动态添加属性,添加一个不存在的属性,但是通过vue.set你可以这么干,这三个参数分别代表:

json对象(字典)/数组-------键值/数组中的index-------你要设置的新值

一定要注意,target只能是两种格式,一种是字典,或者说json对象,另一种是数组,切记!!!


2.this.xxx


什么情况下用到这个呢?这也是用来改变属性的一种设置方法它和Vue.set的区别是:

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive property)。但是它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上,这里this.xxxxx是针对没有嵌套的对象 所以不用vue.set反而更好,否则你的对象会被强制转为数组类型,博主已经体验过了,很不方便。


Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive property)。但是它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上,这里this.content没有嵌套了 所以不用vue.set也可以的,或者说不用反而更好。


华丽丽的分割线

在此总结,如果传递的类型是string,Nsnumber,布尔,这样的类型是没有嵌套的,没有层级,只是一个变量,那就直接用this.xxxx来设置值,否则就需要上面的Vue.set来设置了。


博主下一篇博客,将会详细讲解怎么来设置属性,用实例给大家讲述,一步步教你学会自定义控件,并传值。

目录
相关文章
|
2月前
|
JavaScript
在 Vue 3 组件通信方式中,Provide / Inject 与 Vuex 的区别是什么?
在 Vue 3 组件通信方式中,Provide / Inject 与 Vuex 的区别是什么?
128 65
|
1月前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
50 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
23天前
|
JavaScript 前端开发 开发者
Vue v-for 进阶指南:in 与 of 的区别及应用场景 | 笔记
Vue.js 中的 v-for 是强大的遍历指令,但其中的 in 和 of 关键字往往被开发者忽视。尽管它们的用法相似,但适用的场景和数据结构却各有不同。本文将详细探讨 v-for 中 in 和 of 的区别、适用场景以及在实际开发中的最佳使用时机。通过理解它们的差异,你将能够编写更加高效、简洁的 Vue.js 代码,灵活应对各种数据结构的遍历需求。
82 6
|
20天前
|
缓存 JavaScript
Vue 中 computed 与 method 的区别
【10月更文挑战第15天】computed 和 method 是 Vue 中两个重要的选项,它们在功能和特点上存在着明显的区别。理解并合理运用它们的区别,可以帮助我们构建更高效、更具可维护性的 Vue 应用。在实际开发中,要根据具体情况灵活选择使用,以满足不同的需求。
16 2
|
23天前
|
JavaScript 前端开发
Vue 2 和 Vue 3 之间响应式区别
10月更文挑战第7天
31 2
|
25天前
|
监控 JavaScript 开发者
在 Vue 中,子组件为何不可以修改父组件传递的 Prop,如果修改了,Vue 是如何监控到属性的修改并给出警告的
在 Vue 中,子组件不能直接修改父组件传递的 Prop,以确保数据流的单向性和可预测性。如果子组件尝试修改 Prop,Vue 会通过响应式系统检测到这一变化,并在控制台发出警告,提示开发者避免这种操作。
|
2月前
|
缓存 JavaScript 前端开发
vue-day02计算属性,v-bind,v-if,v-for
文章介绍了Vue.js中的计算属性、class与style的绑定、条件渲染和列表渲染的使用。通过示例代码展示了如何使用计算属性简化模板逻辑、如何通过v-bind动态绑定class和style、如何使用v-if进行条件渲染以及如何使用v-for进行列表渲染。这些特性使得Vue.js在构建动态用户界面时更加灵活和强大。
vue-day02计算属性,v-bind,v-if,v-for
|
28天前
|
JavaScript 前端开发 开发者
VUE学习一:初识VUE、指令、动态绑定、计算属性
这篇文章主要介绍了Vue.js的基础知识,包括初识Vue、指令如v-for、v-on的使用、动态属性绑定(v-bind)、计算属性等概念与实践示例。
57 1
|
29天前
|
存储 JavaScript 前端开发
Set、Map、WeakSet 和 WeakMap 的区别
在 JavaScript 中,Set 和 Map 用于存储唯一值和键值对,支持多种操作方法,如添加、删除和检查元素。WeakSet 和 WeakMap 则存储弱引用的对象,有助于防止内存泄漏,适合特定场景使用。
|
30天前
|
缓存 JavaScript 前端开发
探索Vue.js中的计算属性与侦听器
【10月更文挑战第5天】探索Vue.js中的计算属性与侦听器
19 1
下一篇
无影云桌面