定义在data之外的数据，是无法响应的渲染，意思就是改变数据页面也不会刷新，所以一切要渲染到页面上的数据，必须写在data中
vue只会将已经在data中声明的属性变为响应，没有声明的是不响应的

var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是响应式的

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

vue只会将已经在data中声明的属性变为响应，没有声明的是不响应的

this.$set

<template>
  <div>
      <div v-for='item in list'>{{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>

在vue中更多的是数组的操作不刷新，一种是通过索引赋值，一种是修改数组长度，如何解决呢？

数组API：push,pop,shift,unshift,splice,sort,reverse

vue官方也给了方法

 <template>
  <div>
      <div v-for='item in list'>{{item.a}}</div>
      <button @click='click'>改变原数组</button>
  </div>
</template>
<script>
  export default({
    data(){
      return{
       list:[{a:'vue'},{a:'react'},{a:'js'}],
      }
    },
    methods: {
          click() {
           //改变数组刷新页面
              this.list.push({a:'css'})
          },
        
  })
   
</script>

改变原始数组map

第二种是返回一个新数组的，这种数组在引用地址上已经发生根本改变，这样的赋值操作是能触发更新的（这是处理不刷新的思路，就是改变引用地址，重新赋值触发更新）

简单说，用数组的API就是直接用原数组接收改变的数组，

数组的API中能够改变原始数组的都能触发更新；

  <template>
  <div>
      <div v-for='item in list'>{{item.a}}</div>
      <button @click='hadelClick'>不改变原数组</button>
  </div>
</template>
<script>
  export default({
    data(){
      return{
       list:[{a:'vue'},{a:'react'},{a:'js'}],
      }
    },
    methods: {
          hadelClick(){
        //重新赋值刷新页面      
            this.list =  this.list.map(item=>{
                  item.a = 'css'
                  return item
                })
        }
  })
   
</script>

let arr = []//新数组
this.list.forEach(item=>{  //需要渲染的数组
    //执行你的操作，最后用放到arr中
    arr.push(item)
})
this.list = arr //相当于返回一个新数组可以触发渲染

解决vue修改数据页面不重新渲染问题