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来设置了。


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

目录
相关文章
|
7天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
19 3
|
2月前
|
JavaScript
vue实例的data属性,可以在哪些生命周期中获取到
Vue实例的`data`属性在`beforeCreate`、`created`和`beforeMount`阶段已可访问。此时,虽能使用数据,但事件监听和DOM操作不可行。`beforeCreate`时数据可访问,但未初始化观测和事件;`created`时数据完全可用,但未挂载到DOM;`beforeMount`时仍可访问数据,DOM挂载未开始。
31 3
|
2月前
|
缓存 JavaScript API
在vue中,computed 和 watch 的区别和运用的场景?
在vue中,computed 和 watch 的区别和运用的场景?
14 0
|
2月前
|
JavaScript
在vue中,v-show 与 v-if 有什么区别?
在vue中,v-show 与 v-if 有什么区别?
23 4
|
5天前
|
JavaScript
vue2中$set的原理_它对object属性做了啥?
vue2中$set的原理_它对object属性做了啥?
7 1
|
9天前
|
JavaScript
Vue控制是否禁用disabled属性
Vue控制是否禁用disabled属性
11 1
|
12天前
|
JavaScript 前端开发 API
vue与jqyery的区别
vue与jqyery的区别
|
13天前
|
JavaScript 算法 前端开发
vue3和vue2的区别都有哪些
【4月更文挑战第15天】Vue3与Vue2在响应式系统(Proxy vs. Object.defineProperty)、组件模块化(Composition API vs. Options API)、数据变化检测(Reactive API vs. $watch)、虚拟DOM算法(基于迭代 vs. 基于递归)及Tree-Shaking支持上存在显著差异。Vue3的改进带来了更好的性能和灵活性,适合追求新技术的项目。Vue2则因其成熟稳定,适合维护大型项目。选择版本需根据项目需求、团队情况和技术追求来决定。
14 0
|
22天前
|
缓存 JavaScript API
「Vue3系列」Vue3 计算属性(computed)、监听属性(watch)
在 Vue 3 中,计算属性(Computed Properties)是一种强大的功能,它允许你声明一个依赖于其他响应式数据属性的属性,并且这个属性的值会根据其依赖的数据的变化而自动更新。计算属性是基于它们的依赖关系进行缓存的,只有在它的相关依赖发生改变时才会重新求值。
29 0
|
23天前
|
缓存 JavaScript
vue中的计算属性和侦听属性的区别
vue中的计算属性和侦听属性的区别