img

Vue笔记

2020-03-09 0条评论 2.8k次阅读 JavaScript


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);
  }
},

💬 COMMENT


🦄 支持markdown语法

👋友