Vue中组件生命周期调用顺序

组件的调用顺序都是先父后子，渲染完成的顺序是先子后父。
组件的销毁操作是先父后子，销毁完成的顺序是先子后父。

加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted

子组件更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程

父 beforeUpdate -> 父 updated

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

生命周期中的浏览器渲染

生命周期	是否获取dom节点	是否可以获取data	是否获取methods
beforeCreate	否	否	否
created	否	是	是
beforeMount	否	是	是
mounted	是	是	是

vue.nextTick()的使用场景

理解：当数据更新了，在dom中渲染后，自动执行该函数

* Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

* 与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。

vue 中 filters 获取 data 里的数据

// 声明一个全局变量
let that;
// 在生命周期 beforeCreate里面改变this指向
beforeCreate: function () {
     that = this;
},
filters:{
  timeFilter(val){
      let data = that.time;
      return data;
  }
},

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

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>
</head>

<body>
<div id="app">
   <Square></Square>
</div>

<template id="tplSquare">
  <div>
       <ul>
       <li v-for="value in obj" :key="value">
           {{value}}
       </li>
   </ul>
   <button @click="addObjB">add</button>
  </div>
</template>

<script>
   Vue.component('Square', {
      props: { id: null },
      template: "#tplSquare",
      data() {
          return {
              obj: {
                  a: 'obj.a'
              }
          }
      },
      methods: {
          addObjB(){
              this.obj.b = "obj.b";
              console.log(this.obj)
          }
      }
   })
   new Vue({ el: '#app' })
</script>
</body>
</html>

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

原因在于在Vue实例创建时，obj.b并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新，这时就需要使用Vue的全局api $set(object, key, value )：

set是为了解决初始未定义的属性不能响应式的问题

addObjB () {
  //this.obj.b = 'obj.b'
  this.$set(this.obj, 'b', 'obj.b')
  console.log(this.obj)
}

$set()方法相当于手动的去把obj.b处理成一个响应式的属性，此时视图也会跟着改变了：

或者修改数值某个值


imgList: [
    {
    url: 'https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i176.jpg',
    name: 'lemon'
    }, {
    url: 'https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i176.jpg',
    name: 'lemon2'
    }, {
    url: 'https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i176.jpg',
    name: 'lemon3'
    }
],

this.$set(this.imgList[i], 'name', value)

vue bind 如何加空格

:title="`\u3000\u3000`+data"

手机号码打码

filters: {
  setPhoneStyle(v) {
    return v.substr(0, 3) + '****' + v.substr(7);
  }
},

Vue笔记