vue.set this.$set的作用

Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法

当一个对象在vue中是响应式的，如果仅仅使用普通的方式向这个对象添加或修改这个属性的值，是不会触发视图更新的

但是使用 vue.set 或者 this.$set 的方式可以使得新添加的属性也是响应式的，并触发视图更新
例如：

通过Vue.set处理通过数组下标修改数组属性值时，页面不渲染问题

需求: 在列表里要通过按钮的点击控制手机号码列是显示正常的号码还是显示星号******

首先想到的实现方式就是给表格的每条数据增加一个 showFlag 属性，showFlag:true 显示正常的手机号，showFlag:false 显示星号*****，点击按钮就修改该条数据的showFlag的值

代码：

<template>
    <div>
        <div
            v-for="(item,index) in List"
            :key="index"
            class="phone"
        >
            <span v-if="item.showFlag">{
   
   {item.name}}--{
   
   {item.phone}}</span>
            <span v-else>{
   
   {item.name}}--***********</span>
            <button @click="changeState(index)">点我改变状态</button>
        </div>
    </div>
</template>

方法：

<script>
export default {
    //数据
    data() {
        return {
            List: [],
        }
    },
    created() {
        this.getList()
    },
    methods: {
        //显示手机号点的点击方法
        changeState(i) {
            this.List[i].showFlag = !this.List[i].showFlag
            console.log('showFlag:',this.List[i].showFlag);
 
        },
        //获取列表数据的方法
        getList() {
            this.List = [
                { name: '小明', phone: 13579000001 },
                { name: '小红', phone: 13579000002 }
            ]
            this.List.map(item => {
                item.showFlag = true
                console.log(item);
            })
        }
    },
}
</script>

这时：点击这条数据的按钮，页面显示并不会从数字变换成*****

当点击按钮1时，通过数组下标来更改 showFlag 的值成功，但是页面并没有重新渲染，模板没有被重新解析；

产生问题的原因：Vue2并不支持数组下标的响应式，也就是说Vue2检测不到通过下标更改数组的值。

解决办法：使用Vue官网提供的方法更改数组下标的值

changeState(i) {
            this.List[i].showFlag = !this.List[i].showFlag
            console.log(`按钮${i + 1}的 showFlag:`, this.List[i].showFlag);
            //增加下面这行
            this.$set(this.List, i, this.List[i])
        },

再举个例子：

需求：点击上移按钮实现div上移一个，点击下移按钮实现div下移一个

<div v-for="(item,index) in tabList">
    <div>{
   
   { item.title}}</div>
    <div class="work-item-img">
        <img @click="moveUp(index)" src="../../assets/w上移.png" alt="" />
	    <img @click="moveDown(index)" src="../../assets/w/下移.png" alt="" />
    </div>
</div>

方法：

	data(){
       return {
        tabList: [
				{
					id: 2,
					title: '应用',
				},
				{
					id: 1,
					title: '统计',
				}
			],
        }
    }
		//上移
		moveUp(index) {
			if (index == 0) return
			let W = this.tabList[index]
			this.$set(this.tabList, index, this.tabList[index - 1])
			this.$set(this.tabList, index - 1, W)
		},
		moveDown(index) {
			if (index == this.tabList.length - 1) return
			let W = this.tabList[index]
			this.$set(this.tabList, index, this.tabList[index + 1])
			this.$set(this.tabList, index + 1, W)
		},

补充：修改对象的属性

this.$set(对象，指定属性，修改值)

如：this.$set(this.oneJson,'old',45)

注意属性old是需要加引号的哦

vue.set this.$set的作用

猜你喜欢