本文目录vue $set 给数据赋值Vue里面的 $set的基本使用【vue】为什么要使用Vue.$set(target,key,value)Vue.set (修改数组单一下标的值)Vue 中的 set 和 $set 的原理是什么，是怎么实现的Vue基础知识Vue-给对象新增属性（使用Vue.$set()）Vue.set的使用Vue方向：Vue实例上使用$set()更新对象或数组vue 中的Vue.set 和 this.$set 的区别vue $set 给数据赋值

如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 业务介绍：模拟后台数据向DOM树上遍历数据，再向数据里添加状态属性，根据状态改变显示图片，默认nochecked.png，点击时改变状态。显示checked.png

DOM树

模拟数据

向原数据添加新属性status

点击事件(根据索引改变当前属性的状态)

输出发现有status属性，状态也由false改为了true，但是就是样式要刷新一下才能显示。把里面的属性仔细看一遍原来status没有get/set方法。错误展示：

把 val.status=false; 改为 this.$set(val,’status’,false) 问题就解决了。

当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。     data() {

        return {

            items: [

                { message: “one“, id:“1“ },

                { message: “two“, id:“2“ },

                { message: “three“, id:“3“ }

            ]

        };

    },

    mounted(){

        this.items={message:“测试“,id:“4“};  //此时对象的值更改了，但是视图没有更新

        this.$set(this.items,0,{message:“测试“,id:“4“})； //$set可以触发更新视图

        console.log(this.items)

    },

    methods: {

        // 调用方法：Vue.set( target, key, value )

        // target：要更改的数据源(可以是对象或者数组)

        // key：要更改的具体数据

        // value ：重新赋的值        handClick() {

            //Vue methods中的this 指向的是Vue的实例，这里可以直接在this中找到itemsthis.$set(this.items,0, { message:“更改one的值“, id:“0“ });

        },

    }

};

vue中不能检测到数组和对象的两种变化：

1.数组长度的变化 vm.arr.length = 4

2,数组通过索引值修改内容 vm.arr = ’aa’

Vue.$set(target,key,value)可以动态的给数组、对象添加修改数据，并更新视图中数据的显示。

vue在构造函数new Vue()时，就通过Object.defineProperty中的getter和setter 这两个方法，完成了对数据的绑定。所以直接通过vm.arr = ’aa’的方法，无法修改值触发vue中视图的更新，必须还得通过Object.defineProperty的方法去改变，而Vue.$set（）就封装了js底层的Object.defineProperty方法。

Vue.set数组实现双向绑定的原理：其实Vue.set()对于数组的处理其实就是调用了splice方法。splice是vue中的变异数组方法，添加了get和set后会引起视图响应。

变异数组：  https://www.jb51.net/article/171869.htm

我们都知道Vue是一个MVVM的框架,也就是通过数据模型驱动视图变化的,在实际项目中我们会发现,如果想改变视图展示(数据类),只需要修改Vue实例下的数据模型即可.但是当遇到数组的时候,直接通过下标修改数组的值,却发现视图并没有发生改变.但是通过console检查数据模型的时候又发现数据已经变化了.例如:

这个例子,我们可以看到数据模型为list,是个array.通过for循环便利值到页面中,通过button调用changValue函数改变list的值为string类型的999.而点击后,并没有改变视图的数据显示,为了校验是否修改成功,通过console校验,发现确实是修改了.这就是经常在项目中对数组操作不成功的情况,这个时候就要用到我们vue对象的set方法来改变数组的值

this.$set()改变数组,需要传入3个参数: 1.需要改变的数组变量 2.下标 3.改变的值

如下图所示，先进行一个判断，判断target不是undefined、null、string、number、symbol、boolean类型的数据。

最后，$set就是set

数据双向绑定，组件化，单文件组件

全局api： vue.extend 、 vue.set 实例选项: new Vue() 、 el 、 data 、 compents 都是vue实例选项 实例属性和方法： vm.$on 、 vm.$data 、 vm.$destroy() 在$都是vue的实例和方法 指令： directive 内置组件： 《components》《/compontents》 、 《keep-alive》《/keep-alive》 、 《router-view》《/router-view》

数组中不可用的方法：slice，concat； 直接修改数组list = 值，不可以这样直接修改； Vue.set(数组，索引，{值}) vue的全局方法set来更改数组的某一项的值

标签属性和条件渲染 标签属性： v-bind：href=’link“; 等效于 :href=“link“ 动态绑定； 条件渲染： v-if 、 v-else 、 v-show ； 数据绑定： {{...}} 、 v-html (原始-HTML)、 v-text ；

事件绑定-内置事件绑定，自定义事件绑定 v-on:click=“run“ 等效于 @:click=“run“ 事件绑定； 自定义事件绑定： 父组件自定义事件 《my-compented @my-event=’toggle’》《/my-compented》 子组件触发 my-event 自定义事件； this.$emit(’my-event’, opation)； 父组件执行toggle 函数；

计算属性和数据监听 computed选项 -计算属性：根据我们调用属性来跟新，调用的属性没有变更，我们computed选项里面的方法读取的是缓存；

页面内容响应数据v-once 如果你需要页面内容响应数据的变化，就不加v-once。 如果你需要页面内容渲染后，不随数据的变化而变化，就加上这个。 对于一些固定不变的组件，在调用时我们可以加上v-once，只在第一次渲染执行，保存数据在内存中，后面再调用直接从内容中提取，提高执行效率。

应用

组件的通信 《p:is = “动态的组件名“》《/p》 等同于 《动态的组件名》《/动态的组件名》 动态绑定组件 注：Vue有个单项数据流的概念：即父组件传递给子组件的参数，子组件不能直接修改；防止引用类型参数被修改后，如果父组件中其他地方也使用了此参数会受到影响。

子组件 props 接受的两种形式： 数组： ，从父组件传递两个属性值； 动态展现： {{firstName}} 对象：

slot：插槽 父组件插件里面定义的内容放到子组件 slot 中：

子组件

vue高级功能--过渡和动画

自定义指令：

使用 vue-cli的优势： 成熟的vue项目架构设计； 本地测试服务器； 集成打包上线方案 webpack

npm install vue-cli -g ：全局安装vue-cli vue init webpack my-project ：初始化项目 npm install 安装项目依赖

npm run dev ：在localhost启动测试服务器； npm run bulid ：生成上线目录（部署）

a、安装 vue-router

b、配置路由

6、关闭eslint dev模式下，默认会做eslint检测，若要关闭，打开 config/index.js ，设置 useEslint: false ，${}占位符，多行字符串

7、生命周期

8、支持es6 es6中很多新特性很好用class、promise、then、catch、...（数组转换符号）、函数设置参数默认值等 a、安装babel-polyfill

b、在入口main.js文件当中引入:

c、找到build文件夹下的webpack.base.conf.js

文章参考： 慕课网-欧米雪儿lyy

在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。

根据官方文档定义： 如果在实例创建之后添加新的属性到实例上，它不会触发视图更新 。

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter 。

受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

看以下实例：

可以看出d属性是有get 和 set方法的，而新增的e属性是没有的。

点击触发3次addd，点击触发3次adde,页面效果及控制台信息如下

此时触发1次addd,页面效果如下：

由此可以看出，更新新增属性e，是不会更新视图，但是会改变其值，当更新原有属性d时会更新视图，同时将新增的属性e的值也更新到视图里边

官方定义：

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：

Vue.set(vm.obj, ’e’, 0) 您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：

this.$set(this.obj,’e’,02)

有时你想向已有对象上添加一些属性，例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是，添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象，让它包含原对象的属性和新的属性：

// 代替 Object.assign(this.obj, { a: 1, e: 2 }) this.obj= Object.assign({}, this.obj, { a: 1, e: 2 })

上述实例解决如下：

点击触发3次addd，点击触发3次adde,页面效果及控制台信息如下：

这里我定义了一个列表数据，我将通过三个不同的按钮来控制列表数据。

调用方法：Vue.set( target, key, value )

target：要更改的数据源(可以是对象或者数组)

key：要更改的具体数据

value ：重新赋的值

《!DOCTYPE html》《html》《headlang=“en“》《metacharset=“UTF-8“》《title》《/title》《/head》《body》《divid=“app2“》《pv-for=“item in items“:key=“ item.id “》{{item.message}}《/p》《buttonclass=“btn“@click=“btn2Click()“》动态赋值《/button》 《buttonclass=“btn“@click=“btn3Click()“》为data新增属性《/button》《/div》《scriptsrc=“../../dist/vue.min.js“》《/script》《script》var vm2=new Vue({ el:“#app2“, data:{ items: }, methods:{ btn2Click:function(){ Vue.set(this.items,0,{message:“Change Test“,id:’10’}) }, btn3Click:function(){ var itemLen=this.items.length; Vue.set(this.items,itemLen,{message:“Test add attr“,id:itemLen}); } }});《/script》《/body》《/html》

在vue的实例方法中， $set 可以更新对象数据或是数组，有时在实际的开发过程中，对象的数据可能会没有及时地更新，导致页面渲染的值还是旧值，这个时候就可以使用 $set 去重新更新下数据。

使用方法： $set(data选项中的对象名, 属性名, 属性值)

数组的处理方法有两种，一种是直接通过修改数组的引用从而达到改变数组内容在页面重新渲染的效果，这种方法实际开发中不推荐，比较笨重。

修改数组元素个人喜欢spice()方法，splice(插入的位置索引号，删除元素的个数，插入的元素)

在js中，还有一种修改数组的方法，那就是通过直接修改数组索引下标，从而修改数组中的元素数据内容，但是这样做，就会出现，数组更新了，但是页面没有重新渲染，也就是说，updated()生命周期函数没有执行！

可以看到，使用这种方法就会导致页面数据没有进行重新渲染！但是数组确实是发生了变化的。因此，实际开发中需要避开这种操作，以免产生数据渲染失败的问题。

$set() 的使用方法是 this.$set(数组名，插入的索引下标值，插入的数据元素)

这种修改数组的方式，同样是能够达到数组的内容发送改变并且页面也是能够重新渲染的。

2019年8月14号上午，有个需求为，根据点击的按钮 联动一个下拉列表，如，点击“全部”,下拉列表显示所有的选项，点击“待申请”，下拉列表显示 待申请的选项。

想要改变vue中数组，并且被实时自动检测数组的变动，且渲染页面。就用Vue的set方法

受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。

有，Vue.set 和this.$set 两种方法，

例子：1.Vue.set 可以设置实例创建之后添加的新的属性，（在data里未声明的属性），而。this.$set只能设置实例创建后存在的属性。

Vue.set(target，key，value)

target:目标数组，可是Object可是Array，

key:要改变的属性，可为string，可为number

value:any

返回值：设置的目标