Vue中容易忽略的问题本文记录学习过程中遇到的容易忽略的知识点。如有错误，欢迎指正。 ref通常是一个静态属性。 vue

本文记录学习过程中遇到的容易忽略的知识点。如有错误，欢迎指正。

ref通常是一个静态属性。
vue 可追踪的对象的属性不限制深度，深层嵌套的对象其属性仍是响应式的；watch方法只能监听一层嵌套对象属性的变化，除非加deep:true属性。
vue不允许动态添加根级别的响应式属性，必须在初始化实例前声明所有根级别响应式属性。
vue更新DOM是异步的。
this.$nextTick()中回调函数不使用箭头函数，this仍可以指向当前vue的实例。
prop中的注意事项：

props选项以字符串数组形式列出prop
prop用来传递一个初始值，子组将将其作为一个本地数据使用，定义一个本地data属性，并将这个prop作为其初始值。
prop以原始的值传入且需要转换，用这个prop定义一个计算属性
javascript对象和数组是通过引入传入的。对于一个数组或对象雷丁的prop，在子组件中改变这个对象或数组本身会影响父组件的状态。

解决方案：

【1】手写一个深拷贝

【2】JSON.parse()和JSON.stringify()

var obj = {name:'xixi',age:20,company : { name : '腾讯', address : '深圳'} };
var obj_json = JSON.parse(JSON.stringify(obj));

【3】Lodash中的_.cloneDeep()

var objects = [{ 'a': 1 }, { 'b': 2 }];
var deep = _.cloneDeep(objects);

【4】jquery中的$.extend()

var obj = {name:'xixi',age:20,company : { name : '腾讯', address : '深圳'} };
var obj_extend = $.extend(true,{}, obj); //extend方法，第一个参数为true，为深拷贝，为false，或者没有为浅拷贝。

7.v-slot：只能用在template标签上。

8.mounted生命周期的误区

当前组件的mounted生命周期函数，只在当前组件有效。如果当前组件引入了其他组件作为子组件，mounted执行时只能保证当前组件的DOM挂载成功，子组件的DOM未必挂载成功。

9.父子组件生命周期的执行顺序

parent.vue

<template>
  <div>
    <p>我是父组件</p>
    <child></child>
  </div>
</template>

<script>
  import Child from './child'
  export default {
    name: 'parent',
    data: function () {
      return {
        arr: []
      }
    },
    components: {
      Child
    },
    beforeCreate () {
      console.log('I am parents beforeCreated')
    },
    created () {
      console.log('I am parents created')
    },
    beforeMount () {
      console.log('I am parents beforeMount')
    },
    mounted () {
      console.log('I am parents mounted')
    }
  }
</script>

<style scoped>
</style>

child.vue

<template>
  <div>
    <p>我是子组件</p>

  </div>
</template>

<script>
  export default {
    name: 'child',
    beforeCreate () {
      console.log('I am child beforeCreated')
    },
    created () {
      console.log('I am child created')
    },
    beforeMount () {
      console.log('I am child beforeMount')
    },
    mounted () {
      console.log('I am child mounted')
    }
  }
</script>

<style scoped>
</style>

运行，在console中打印如下：

参考文章：

www.cnblogs.com/hutuzhu/p/1…