vue 视图不更新

$nextTick

image.png

<template>
  <section>
    <h1 ref="hello">{{ value }}</h1>
    <el-button type="danger" @click="get">点击</el-button>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        value: 'Hello World ~'
      };
    },
    methods: {
      get() {
        this.value = '你好啊';
        console.log(this.$refs['hello'].innerText);
        this.$nextTick(() => {
          console.log(this.$refs['hello'].innerText);
        });
      }
    },
    mounted() {
    },
    created() {
    }
  }
</script>

image.png

根据上面的例子可以看出，在方法里直接打印的话，由于dom元素还没有更新，因此打印出来的还是未改变之前的值，而通过this.$nextTick()获取到的值为dom更新之后的值

this.$set的用法

data中数据，都是响应式。也就是说，如果操作data中的数据，视图会实时更新；

但在实际开发中，遇到过一个坑：若data中数据类型较为复杂，方法methods中改变对象的属性，视图也就是页面并不会改变

原因是vue监听不到数据类型特别复杂的属性。

可以使用this.$set()来进行强制更新，进而解决问题

对象操作：

三个参数：this.$set("改变的对象"，"改变的对象属性"，"值")

数组操作：

三个参数：this.$set("数组"，"下标"，"值")

<template>
<div id="app2">
<p v-for="item in items" :key="item.id">{{item.message}}</p>
<button class="btn" @click="handClick()">更改数据</button> 
</div>
</template>

<script>
export default {
data() {
return {
items: [
{ message: "one", id: "1" },
{ message: "two", id: "2" },
{ message: "three", id: "3" }
]
};
},
mounted(){
this.items[0]={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中找到items
this.$set(this.items, 0, { message: "更改one的值", id: "0" });
},
}
};
</script>

<style>
</style>

参考：https://www.jianshu.com/p/5fe073e36baf
参考：http://www.mamicode.com/info-detail-3063951.html
参考：https://www.cnblogs.com/lanshu123/p/11636377.html

监听参考：https://www.cnblogs.com/yesu/p/9546458.html

vue多层循环，动态改变数据后渲染的很慢或者不渲染
可在动态改变数据的方法，第一行加上

this.$forceUpdate();

在使用Vue框架开发时，在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值，我是在使用多层v-for嵌套时出现这种问题的，

解决方法：运用 this.$forceUpdate()强制刷新