Vue笔记
Sonder
2020-03-09
3066字
8分钟
浏览 (4k)
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中的对象属性添加一个新的属性时会发生什么，如何解决？
示例：
<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);
}
},