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


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

目录
相关文章
|
3月前
|
存储 缓存 JavaScript
Set和Map有什么区别?
Set和Map有什么区别?
258 1
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
561 0
|
4月前
|
存储 JavaScript 前端开发
Set中的add()方法和数组的push()方法有什么区别?
Set中的add()方法和数组的push()方法有什么区别?
306 122
|
6月前
|
JavaScript 前端开发 算法
Vue 3 和 Vue 2 的区别及优点
Vue 3 和 Vue 2 的区别及优点
|
4月前
|
存储 编译器 容器
set、map、multiset、multimap的介绍及使用以及区别,注意事项
set是按照一定次序存储元素的容器,使用set的迭代器遍历set中的元素,可以得到有序序列。set当中存储元素的value都是唯一的,不可以重复,因此可以使用set进行去重。set默认是升序的,但是其内部默认不是按照大于比较,而是按照小于比较。set中的元素不能被修改,因为set在底层是用二叉搜索树来实现的,若是对二叉搜索树当中某个结点的值进行了修改,那么这棵树将不再是二叉搜索树。
201 0
|
5月前
|
JavaScript 前端开发 API
Vue 2 与 Vue 3 的区别:深度对比与迁移指南
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,在过去的几年里,Vue 2 一直是前端开发中的重要工具。而 Vue 3 作为其升级版本,带来了许多显著的改进和新特性。在本文中,我们将深入比较 Vue 2 和 Vue 3 的主要区别,帮助开发者更好地理解这两个版本之间的变化,并提供迁移建议。 1. Vue 3 的新特性概述 Vue 3 引入了许多新特性,使得开发体验更加流畅、灵活。以下是 Vue 3 的一些关键改进: 1.1 Composition API Composition API 是 Vue 3 的核心新特性之一。它改变了 Vue 组件的代码结构,使得逻辑组
1507 0
|
11月前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
463 60
|
7月前
|
存储 数据采集 供应链
属性描述符初探——Vue实现数据劫持的基础
属性描述符还有很多内容可以挖掘,比如defineProperty与Proxy的区别,比如vue2与vue3实现数据劫持的方式有什么不同,实现效果有哪些差异等,这篇博文只是入门,以后有时间再深挖。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
11月前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。

热门文章

最新文章