Vue修改数据页面不更新的原因和解决方案

vue2是通过Object.defineProperty来实现数据响应式 ，因此在vue中写在data中的属性是可以转换成getter和setter，换句话说就是响应式的，其他定义在data之外的数据，是无法响应的渲染，意思就是改变数据 页面也不会刷新，所以一切要渲染到页面上的数据，必须写在data中.

列举几个不刷新的实例： 修改对象的某一属性 vue只会将已经在data中声明的属性变为响应，没有声明的是不响应的

<template>
  <div>
      <div v-for=item in list :key="item">{
          
   {
          
   item}}</div>
      <button @click=click>改变</button>
      <button @click=hadelClick>解决方法</button>
  </div>
</template>
<script>
  export default({
          
   
    data(){
          
   
      return{
          
   
        list:{
          
   a:a,b:b},
      }
    },
    methods: {
          
   
          click() {
          
   
          //  未声明不触发渲染
           this.list.c=c

          },
          hadelClick(){
          
   
            // 解决方法，使用vue提供的$set方法来触发渲染
            this.$set(this.list,d,d)
          }
        }
  })
   
</script>

当然如果我们要添加多个属性，可以使用 Object.assign() 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，并返回目标对象。(简单说就是合并到第一个参数中)

this.list = Object.assign({
          
   },this.list,{
          
   c:c,d:d})

修改数组对象的某一属性

<template>
  <div>
      <div v-for=item in list>{
          
   {
          
   item.a}}</div>
      <button @click=click>改变</button>
      <button @click=hadelClick>解决方法</button>
  </div>
</template>
<script>
  export default({
          
   
    data(){
          
   
      return{
          
   
        list:[{
          
   a:vue},{
          
   a:react},{
          
   a:js}],
      }
    },
    methods: {
          
   
          click() {
          
   
            //想这样直接给数组中的某一个对象直接赋值，是无法动态渲染的（即改变了数据，页面不渲染）
            this.list[0] = {
          
   a:css} //页面不渲染
            console.log(this.list)  //[{
          
   a:css},{
          
   a:react},{
          
   a:js}]
          },
          hadelClick(){
          
   
            // 解决方法，使用vue提供的$set方法来触发渲染
            this.$set(this.list[1],a,css)
            console.log(this.list)//[{
          
   a:css},{
          
   a:css},{
          
   a:js}]
          }
        }
  })
   
</script>

vue中更多的是数组的操作不刷新，一种是通过索引赋值，一种是修改数组长度，vue官方也给出了答案： 数组的API，中能够改变原始数组的都能触发更新；

push() pop() shift() unshift() splice() sort() reverse()

如果上述全都无法执行，可以使用this.$forceUpdate()方法（强制刷新）

<template>
  <div>
      <div v-for=item in list>{
          
   {
          
   item.a}}</div>
      <button @click=click>改变</button>
      <button @click=hadelClick>解决方法</button>
  </div>
</template>
<script>
  export default({
          
   
    data(){
          
   
      return{
          
   
        list:[{
          
   a:vue},{
          
   a:react},{
          
   a:js}],
      }
    },
    methods: {
          
   
          click() {
          
   
            this.list[0] = {
          
   a:css} //页面不渲染
            console.log(this.list)  //[{
          
   a:css},{
          
   a:react},{
          
   a:js}]
          },
          hadelClick(){
          
   
            this.list[0] = {
          
   a:css} //页面不渲染
            console.log(this.list)  //[{
          
   a:css},{
          
   a:react},{
          
   a:js}]
              this.$forceUpdate();//强制刷新
          }
        }
  })