vue computed 传参_vue生命周期
vue生命周期
简要描述：
vue生命周期
vue的生命周期是什么
生命周期钩子是在Vue对象生命周期的某个阶段执行的已定义方法。组件创建、挂载、更新、销毁、的时候触发的一系列的方法 这些方法就叫做生命周期函数。
vue每个组件都是独立的，每个组件都有一个属于它的生命周期。
注意：生命周期钩子函数不允许写成箭头函数
详解
| 生命周期钩子 | 详细 |
|---|---|
| beforeCreate | 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。 |
| created | 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算 |
| beforeMount | 在挂载开始之前被调用：相关的 render 函数首次被调用 |
| mounted | 被调用时 vm.$el 也在文档内 |
| beforeUpdate | 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。 |
| updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。 |
| activated | keep-alive 组件激活时调用。 |
| deactivated | keep-alive 组件停用时调用。 |
| beforeDestroy | 实例销毁之前调用。在这一步，实例仍然完全可用。 |
| destroyed | Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 |
生命周期
1.vue的生命周期是什么 ?
2.vue生命周期的在项目中的执行顺序
3.vue中内置的方法 属性和vue生命周期的运行顺序(data、methods、computed、watch)
4.自己构造的方法与vue生命周期的运行顺序
5.总结
一、vue的生命周期是什么
生命周期钩子是在Vue对象生命周期的某个阶段执行的已定义方法。组件创建、挂载、更新、销毁、的时候触发的一系列的方法 这些方法就叫做生命周期函数。
vue每个组件都是独立的，每个组件都有一个属于它的生命周期。
注意：生命周期钩子函数不允许写成箭头函数
在组件中具体的方法有:
new Vue()
构造函数生成vue 实例
beforeCreate
组件创建前触发，目的是为了组件的生命周期 和 组件中的事件做准备
数据没有获得，真实dom也没有渲染出来
可以进行数据请求，提供了一次数据修改的机会
执行一次
created
在这个生命阶段，对象及其事件完全初始化，计算属性，事件回调，但dom树并未挂载。
组件创建结束
数据得到了，真实dom没有渲染出来
可以进行数据请求，提供了一次数据修改的机会
执行了一次
beforeMount
在这个阶段，它检查是否有任何模板可用于要在DOM中呈现的对象。如果没有找到模板，那么它将所定义元素的外部HTML视为模板。
组件挂载前
任务：判断el 判断 template
如果el没有，那么我们需要手动挂载，如果有，那么判断template
如果template有，那么进行render函数
如果template没有，那么通过 outerHTML 手动书写模板数据可以获得，但是真实dom还没有渲染
可以进行数据请求，也提供了一次数据修改的机会
执行一次
mounted
DOM已准备就绪并放置在页面内，一旦模板准备就绪。它将数据放入模板并创建可呈现元素，用这个新的数据填充元素替换DOM元素。这一切都发生在mounted钩子上。
组件挂载结束
数据获得了，真实dom也获得了
可以进行数据请求，也就可以修改数据
执行了一次
可以进行真实dom的操作了( 可以进行第三方库的实例化了 )
数据更新
beforeUpdate
在外部事件/用户输入使数据发生更改时，此钩子在DOM元素的更改之前被触发。
更新前
重新渲染 DOM , 然后通过算法比较两次vdom,生成patch 补丁对象
这个钩子函数更多的是内部进行一些操作，我们就不在多干预了
可以触发多次
updated
更新结束
真实dom得到了，数据也得到了( 更新后的 )
动态数据获取( 第三方库实例化 )
可以触发多次
beforeDestroy
实例销毁之前调用，在这里还可以访问实例的数据。
//这里可以调用 vm.$destroy();来销毁该对象。
destroyed
组件已销毁 后调用
综上总结：
数据请求一般写在created里面
第三方库实例化我们一般会往mounted中写
Vue的销毁有两种形式
通过开关的形式
通过调用 $destroy 方法
对比：内部销毁 vs 外部销毁
外部销毁不仅能销毁组件，也能销毁该组件的dom结构
内部销毁只能销毁组件，不能销毁组件的dom结构生命周期销毁代码
外部销毁
<div id="app">
<button @click = "flag = !flag"> 切换 </button>
<Hello v-if = "flag"></Hello>
</div>
<template id="hello">
<div>
hello
</div>
</template>内部销毁
<div id="app">
<Hello></Hello>
</div>
<template id="hello">
<div class="hello-box">
<button @click = "clear"> 销毁 </button>
hello
</div>
</template>公共js代码
Vue.component('Hello',{
template: '#hello',
methods: {
clear () {
this.$destroy()
}
},
mounted () {
this.time = setInterval ( () => {
console.log( '1903' )
},1000)
},
beforeDestroy () {
console.log('beforeDestroy')
clearInterval( this.time )
document.querySelector('.hello-box').remove()
},
destroyed () {
console.log('destroyed')
}
})
new Vue({
el: '#app',
data: {
flag: true
}
})概要
我们可以使用生命周期钩子在Vue对象的不同阶段添加自定义代码。它将帮助我们控制在DOM中创建对象的流程，以及更新和删除对象。
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Documenttitle>head><body><div id="app"><button @click="fn">按钮button><p ref="pp">
{{title}}p>div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>let vm = new Vue({
el:"#app",
data:{
title:"123"},
methods:{fn(){this.title = "456"}},//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。beforeCreate(){//拿不到数据
console.log(this)},created(){//可以拿到数据,拿不到dom节点
console.log(this.title)
console.log(this.$el)//},beforeMount(){
console.log(this.title)},mounted(){//拿到dom节点
console.log(this.$refs.pp)},//当你数据修改的时候会被执行，不会在这两个钩子函数里面修改数据beforeUpdate(){
console.log(this.$refs.pp.innerHTML)},updated(){//如果你去修改数据了，想要完全检测的话只能在updated// console.log(2)
console.log(this.$refs.pp.innerHTML)},beforeDestroy(){
console.log("销毁前")},destroyed(){
console.log("已销毁，结束！")}})// 销毁
vm.$destroy();script>body>html>vue中内置的方法属性和vue生命周期的运行顺序
data props computed watch methods他们之间的生成顺序是什么呢？
根据翻看vue源码可知：
props => methods =>data => computed => watch
自己构造的方法与vue生命周期的运行顺序 如show这些
往往我们在开发项目时都经常用到 $refs 来直接访问子组件的方法，但是这样调用的时候可能会导致数据的延迟滞后的问题，则会出现bug。
解决方法则是推荐采取异步回调的方法，然后传参进去，严格遵守vue的生命周期就可以解决 推荐 es6 的promise。
示例代码：
handleAsync () {
return new Promise(resolve=>{
const res="";
resolve(res)
})
}async handleShow() {
await this.handleAsync().then(res=>{
this.$refs.child.show(res);
})
}vm.$destroy();
vm.$destroy();
完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。
触发 beforeDestroy 和 destroyed 的钩子。