vue中$set用法详解

目录
  • 1、为什么要用set？
  • 2、set用法
  • 3、什么时候使用set？
  • 4、文档地址

摘要：地址没有改变，vue就监测不到数据变化。这个时候，双向绑定就失效了。

想了解有关JS堆栈的知识？请点击这里。

1、为什么要用set？

在vue中，并不是任何时候数据都是双向绑定的。
在官方文档中，有这样一段话，如下：

从文档得知，当数据没有被双向绑定的时候，我们就需要使用set了

2、set用法

解决数据没有被双向绑定我们可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名。

- this.$set(原数组, 索引值, 需要赋的值)

length的问题还需要用splice方法。

- vm.items.splice(newLength)

3、什么时候使用set？

set为解决双向绑定失效而生，我们只需要关注什么时候双向绑定失效就可以了。

笔者看完了官方文档以后，总结了一下，只要值的地址没有改变，vue是检测不到数据变化的。

共有下面三种情况：

  • 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
  • 当你修改数组的长度时，例如：vm.items.length = newLength
  • 由于 JavaScript 的限制，Vue不能检测对象属性的添加或删除

此处针对第三点做一些说明：

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的

vm.b = 2
// `vm.b` 不是响应式的

从上面的代码我们可以知道vm.b不是响应式的，简单的来说，如果对象中原来没有这个key，新增的key是无法双向绑定的。

当然这里我们同样可以用set去解决这个问题：

vm.$set(vm.userProfile, 'age', 27)

如果我们添加的属性很多条，可能就需要写一个循环来多次set。当然你也可能使用Object.assign，这里有一些需要注意的地方。

如果你想添加新的响应式属性，下面这样写是不行的。

Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

下面这样才是正确的。

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

4、文档地址

https://cn.vuejs.org/v2/guide/list.html#logo

以上。

到此这篇关于vue中$set用法详细讲解的文章就介绍到这了,更多相关vue中$set用法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue3 $emit用法指南(含选项API、组合API及 setup 语法糖)

    Vue3 $emit用法指南(含选项API、组合API及 setup 语法糖)

    目录 Vue Emit是如何工作的? 选项API - this.$emit 带有setup()的组合API - context.emit 在 <script setup> 中的用法 最佳实践 使用 emits 定义自定义事件 正确的事件命令 许多Vue模式涉及使用props将数据从父组件传递到子组件.但如果我们需要一个子组件将数据传给它的父组件呢? 使用 emit,我们可以触发事件并将数据传递到组件的层次结构中.这对下面几种情况很有用,如: 从 input 中发出数据 从 modal 本身内部

  • vue项目如何使用$router.go(-1)返回时刷新原来的界面

    目录 使用$router.go(-1)返回时刷新原来的界面 问题如下 解决方法1 解决方法2 this.$router.back()与this.$router.go(-1)返回上一页的区别 使用$router.go(-1)返回时刷新原来的界面 在项目需求中,我们常常需要使用$router.go(-1)返回之前的页面,但是却发现,之前的界面,保持着上次跳转的状态,比如说:弹框未关闭之类的等等,..... 问题如下 界面1 : 界面2使用$router.go(-1)返回上一次的界面 由于使用$rou

  • 关于Vue中this.$set的正确使用

    this.#set(obj, key, value) 我们在项目开发的过程中,经常会遇到这种情况:为data中的某一个对象添加一个属性 <template> <div class="hello"> <button @click="setMessage">添加属性</button> {{ student.name }} <input type="text" v-model="stude

  • vue如何通过$router.push传参数

    vue如何通过$router.push传参数

    目录 如何通过$router.push传参数 this.$router.push传参及参数接收 1.两种方式 2.区别 如何通过$router.push传参数 下面通过A页面向B页面传值来举个例子: //A页面:  this.$router.push({     name: '页面B',     params: { data: '我是要传递的参数' } }) //B页面拿到传来的值:  this.data = this.$route.params.data // 拿到上个页面传来的数据 代码很简

  • vue 项目中的this.$get,this.$post等$的用法案例详解

    vue官网上有这么一句话 vue.js的插件应该暴露一个install方法.这个方法的第一个参数是vue构造器,第二个参数是一个可选的选项对象: 注意要首先安装axios 即 npm install axios -S 结合案例: // 基于axios 封装的http请求插件 const axios = require('axios'); /** * 以下这种方式需要调用Vue.use方法 调用的时候调用 this.$fetch, this.$post, this.$axios, this.$pu

  • 详解Vue3 父组件调用子组件方法($refs 在setup()、＜script setup＞ 中使用)

    在 vue2 中 ref 被用来获取对应的子元素,然后调用子元素内部的方法. <template> <!-- 子组件 --> <TestComponent ref="TestComponent"></TestComponent> </template> <script> // 导入子组件 import TestComponent from './TestComponent' export default { com

  • vue中$router.back()和$router.go()的用法

    目录 $router.back()和$router.go() vue点击按钮跳转页面总结 router.push router.replace router.go 总结一下在Vue里面跳转页面的方法 解析router.push 和 router.replace的区别 $router.back()和$router.go() 返回上一页,有两种方法: 1. $router.back() 2. $router.go() 使用$router.back()和$router.go(-1)作用相同,都是返回原

  • vue中$set用法详解

    目录 1.为什么要用set? 2.set用法 3.什么时候使用set? 4.文档地址 摘要:地址没有改变,vue就监测不到数据变化.这个时候,双向绑定就失效了. 想了解有关JS堆栈的知识?请点击这里. 1.为什么要用set? 在vue中,并不是任何时候数据都是双向绑定的.在官方文档中,有这样一段话,如下: 从文档得知,当数据没有被双向绑定的时候,我们就需要使用set了 2.set用法 解决数据没有被双向绑定我们可以使用 vm.$set 实例方法,该方法是全局方法 Vue.set 的一个别名. -

  • cdn模式下vue的基本用法详解

    我们知道jq是简化了dom操作,而react和vue则是通过使用虚拟dom的方式,不需要频繁的更改ui界面,而是通过更改数据的方式来更新界面.我们知道些jq插件时会在IFFE中传入jQuery,jQuery在此程序中映射为符号,这样可以避免$号被其他库覆写.其实vue中new Vue()对象,效果也是类似,可以避免vue范围类的数据或变量被污染.我们先来看一些基本的用法插入文本值 v-html 直接插入html结构 v-bind属性 <a :href="url" rel=&quo

  • Vue组件基础用法详解

    Vue组件概述 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需,使用不同的组件来拼接页面.这种开发模式使前端页面易于扩展,且灵活性高,而且组件之间也实现了解耦. 在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例 组件是一个自定义元素或称为一个模块,包括所需的模板.逻辑和样式.在HTML模板中,组件以一个自定义标签的形式存在,起到占位符

  • Vue计时器的用法详解

    Vue计时器的用法详解

    本文实例为大家分享了Vue实现计时器的具体代码,供大家参考,具体内容如下 功能简介: 1.初始值为0,点击[加]按钮,数字自+1:连续点击[加],不影响数字+1 2.点击[停]按钮,停止+1 源码: <!DOCTYPE html> <html add="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="

  • Vue.js用法详解

    Vue.js用法详解

    vue.js 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试. 前  言 前段时间为了一个数据查询的项目自学了Vue,感觉这款框架还是很不错的,今天就整理整理这个框架如何使用,希望对正在学这个框架的小伙伴有所帮助~ 首先,我们先来了解一下Vue: V

  • 基于vue.js中事件修饰符.self的用法(详解)

    .self可以理解为跳过冒泡事件和捕获事件,只有直接作用在该元素上的事件才可以执行. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>self</title> <script src="vue.js"></script> <!--'''''''

  • 关于vue中 $emit的用法详解

    1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <span @click='select(`大连`)'>大连</span> </div&

  • Vue 中mixin 的用法详解

    说下我对vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父

  • Vue中$refs的用法详解

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D

  • Vue props用法详解(小结)

    Vue props用法详解 组件接受的选项之一 props 是 Vue 中非常重要的一个选项.父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数据给子组件:子组件通过 events 给父组件发送消息. 父子级组件 比如我们需要创建两个组件 parent 和 child.需要保证每个组件可以在相对隔离的环境中书写,这样也能提高组件的可维护性. 这里我们先定义父子两个组件和一个 Vue 对象: var childNode = { templat

随机推荐