2019前端面试题汇总（主要为Vue）(2)

比如现在需要监控data中，obj.a 的变化。Vue中监控对象属性的变化你可以这样：

watch: {  
      obj: {  
      handler (newValue, oldValue) {  
        console.log('obj changed')  
      },  
      deep: true  
    }  
  } 

deep属性表示深层遍历，但是这么写会监控obj的所有属性变化，并不是我们想要的效果，所以做点修改：

watch: {  
   'obj.a': {  
      handler (newName, oldName) {  
        console.log('obj.a changed')  
      }  
   }  
  } 

还有一种方法，可以通过computed 来实现，只需要：

computed: {  
    a1 () {  
      return this.obj.a  
    }  
} 

利用计算属性的特性来实现，当依赖改变时，便会重新计算一个新值。

7. Vue中给data中的对象属性添加一个新的属性时会发生什么，如何解决？

示例：

<template>  
  <div>  
    <ul>  
      <li v-for="value in obj" :key="value">  
        {{value}}  
      </li>  
    </ul>  
    <button @click="addObjB">添加obj.b</button>  
  </div>  
</template>  
<script>  
export default {  
  data () {  
    return {  
      obj: {  
        a: 'obj.a'  
      }  
    }  
  },  
  methods: {  
    addObjB () {  
      this.obj.b = 'obj.b'  
      console.log(this.obj)  
    }  
  }  
}  
</script>  
<style></style> 

点击button会发现，obj.b 已经成功添加，但是视图并未刷新：

（编辑：ASP站长网）