首页 >> js开发 >> jsvue3.0生命周期的示例代码js大全
jsvue3.0生命周期的示例代码js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
在组件化的框架中，比如Angular、React或Vue，都为组件定义了生命周期这个概念，每个组件实例在被创建时都要经过一系列的初始化过程，例如：需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时，在这个过程中也会运行一些叫做生命周期钩子的函数，它们提供给用户在组件的不同阶段添加自己的代码的机会。
使用过Vue2.x的朋友肯定对它的生命周期钩子很熟悉了，因为在实际的开发过程中我们多多少少会用到他们，比如 created、mounted、destoryed等等。而在Vue3.0中，Vue2.x Options API形式的生命周期钩子函数和新的Composition API都可以使用，来看个示例代码就明白了：
const { onMounted } = Vue
const MyComp = {
// Options API
mounted() {
console.log('>>>>>> mounted 1')
},
setup() {
// Composition API
onMounted(() => {
console.log('++++++ mounted 2')
})
}
}
const { onMounted } = Vue
const MyComp = {
// Options API
mounted() {
console.log('>>>>>> mounted 1')
},
setup() {
// Composition API
onMounted(() => {
console.log('++++++ mounted 2')
})
}
}两种形式的生命周期函数可以共存（当然实际使用的时候最好只选用一种），它们都会被执行。Composition API形式的生命周期函数都是在 setup 方法中被调用注册。
最后，在实际的开发过程中，请注意一下Options API形式的组件生命周期钩子和Composition API之间的实际对应关系：
beforeCreate -> 请使用 setup()
created -> 请使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured
beforeCreate -> 请使用 setup()
created -> 请使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured整体代码如下：
const { createComponent, createApp, reactive } = Vue
// 计数器组件
const Counter = {
props: {
initCount: {
type: Number,
default: 0
}
},
template: `
恭喜你，你已经写了
{{ state.count }}
斤代码！
`,
// 相当于 vue2.x beforeCreated, created
setup(props) {
const countOps = useCount(props.initCount)
console.log("Counter ===> 相当于 vue2.x 中 beforeCreated, created")
return { ...countOps }
},
onBeforeMount() {
console.log("Counter ===> 相当于 vue2.x 中 beforeMount")
},
onMounted() {
console.log("Counter ===> 相当于 vue2.x 中 mounted")
},
onBeforeUpdate() {
console.log("Counter ===> 相当于 vue2.x 中 beforeUpdate")
},
onUpdated() {
console.log("Counter ===> 相当于 vue2.x 中 updated")
},
onBeforeUnmount() {
console.log("Counter ===> 相当于 vue2.x 中 beforeDestroy")
},
onUnmounted() {
console.log("Counter ===> 相当于 vue2.x 中 destroyed")
},
onErrorCaptured() {
console.log("Counter ===> 相当于 vue2.x 中 errorCaptured")
}
}
function useCount(initCount) {
const state = reactive({ count: initCount })
console.log("state reactive", state)
const increase = () => { state.count++ }
const reset = () => { state.count = 0 }
return { state, increase, reset }
}
// 创建一个 跟组件 app
const App = createComponent({
// 这个就相对于 在另一个 .vue 文件 引用 Counter 组件，需要在 components 属性局部注册组件
components: {
Counter,
},
// 挂载到 App 模板中
template: `
`,
setup() {
console.log("App ===> 相当于 vue2.x 中 beforeCreated, created")
},
onBeforeMount() {
console.log("App ===> 相当于 vue2.x 中 beforeMount")
},
onMounted() {
console.log("App ===> 相当于 vue2.x 中 mounted")
},
onBeforeUpdate() {
console.log("App ===> 相当于 vue2.x 中 beforeUpdate")
},
onUpdated() {
console.log("App ===> 相当于 vue2.x 中 updated")
},
onBeforeUnmount() {
console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
},
onUnmounted() {
console.log("App ===> 相当于 vue2.x 中 destroyed")
},
onErrorCaptured() {
console.log("Counter ===> 相当于 vue2.x 中 errorCaptured")
}
})
// 启动
// container 就是相当于 new Vue() 中 el 元素
const container = document.querySelector("#app")
// createApp() 就是相当于 new Vue() 内部返回的就是 new Vue()
const app = createApp()
// 挂载组件
app.mount(App, container)
const { createComponent, createApp, reactive } = Vue
// 计数器组件
const Counter = {
props: {
initCount: {
type: Number,
default: 0
}
},
template: `
恭喜你，你已经写了
{{ state.count }}
斤代码！
`,
// 相当于 vue2.x beforeCreated, created
setup(props) {
const countOps = useCount(props.initCount)
console.log("Counter ===> 相当于 vue2.x 中 beforeCreated, created")
return { ...countOps }
},
onBeforeMount() {
console.log("Counter ===> 相当于 vue2.x 中 beforeMount")
},
onMounted() {
console.log("Counter ===> 相当于 vue2.x 中 mounted")
},
onBeforeUpdate() {
console.log("Counter ===> 相当于 vue2.x 中 beforeUpdate")
},
onUpdated() {
console.log("Counter ===> 相当于 vue2.x 中 updated")
},
onBeforeUnmount() {
console.log("Counter ===> 相当于 vue2.x 中 beforeDestroy")
},
onUnmounted() {
console.log("Counter ===> 相当于 vue2.x 中 destroyed")
},
onErrorCaptured() {
console.log("Counter ===> 相当于 vue2.x 中 errorCaptured")
}
}
function useCount(initCount) {
const state = reactive({ count: initCount })
console.log("state reactive", state)
const increase = () => { state.count++ }
const reset = () => { state.count = 0 }
return { state, increase, reset }
}
// 创建一个 跟组件 app
const App = createComponent({
// 这个就相对于 在另一个 .vue 文件 引用 Counter 组件，需要在 components 属性局部注册组件
components: {
Counter,
},
// 挂载到 App 模板中
template: `
`,
setup() {
console.log("App ===> 相当于 vue2.x 中 beforeCreated, created")
},
onBeforeMount() {
console.log("App ===> 相当于 vue2.x 中 beforeMount")
},
onMounted() {
console.log("App ===> 相当于 vue2.x 中 mounted")
},
onBeforeUpdate() {
console.log("App ===> 相当于 vue2.x 中 beforeUpdate")
},
onUpdated() {
console.log("App ===> 相当于 vue2.x 中 updated")
},
onBeforeUnmount() {
console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
},
onUnmounted() {
console.log("App ===> 相当于 vue2.x 中 destroyed")
},
onErrorCaptured() {
console.log("Counter ===> 相当于 vue2.x 中 errorCaptured")
}
})
// 启动
// container 就是相当于 new Vue() 中 el 元素
const container = document.querySelector("#app")
// createApp() 就是相当于 new Vue() 内部返回的就是 new Vue()
const app = createApp()
// 挂载组件
app.mount(App, container)转载自：https://zhuanlan.zhihu.com/p/95968847https://zhuanlan.zhihu.com/p/95968847
使用过Vue2.x的朋友肯定对它的生命周期钩子很熟悉了，因为在实际的开发过程中我们多多少少会用到他们，比如 created、mounted、destoryed等等。而在Vue3.0中，Vue2.x Options API形式的生命周期钩子函数和新的Composition API都可以使用，来看个示例代码就明白了：
const { onMounted } = Vue
const MyComp = {
// Options API
mounted() {
console.log('>>>>>> mounted 1')
},
setup() {
// Composition API
onMounted(() => {
console.log('++++++ mounted 2')
})
}
}
const { onMounted } = Vue
const MyComp = {
// Options API
mounted() {
console.log('>>>>>> mounted 1')
},
setup() {
// Composition API
onMounted(() => {
console.log('++++++ mounted 2')
})
}
}两种形式的生命周期函数可以共存（当然实际使用的时候最好只选用一种），它们都会被执行。Composition API形式的生命周期函数都是在 setup 方法中被调用注册。
最后，在实际的开发过程中，请注意一下Options API形式的组件生命周期钩子和Composition API之间的实际对应关系：
beforeCreate -> 请使用 setup()
created -> 请使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured
beforeCreate -> 请使用 setup()
created -> 请使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured整体代码如下：
const { createComponent, createApp, reactive } = Vue
// 计数器组件
const Counter = {
props: {
initCount: {
type: Number,
default: 0
}
},
template: `
恭喜你，你已经写了
{{ state.count }}
斤代码！
`,
// 相当于 vue2.x beforeCreated, created
setup(props) {
const countOps = useCount(props.initCount)
console.log("Counter ===> 相当于 vue2.x 中 beforeCreated, created")
return { ...countOps }
},
onBeforeMount() {
console.log("Counter ===> 相当于 vue2.x 中 beforeMount")
},
onMounted() {
console.log("Counter ===> 相当于 vue2.x 中 mounted")
},
onBeforeUpdate() {
console.log("Counter ===> 相当于 vue2.x 中 beforeUpdate")
},
onUpdated() {
console.log("Counter ===> 相当于 vue2.x 中 updated")
},
onBeforeUnmount() {
console.log("Counter ===> 相当于 vue2.x 中 beforeDestroy")
},
onUnmounted() {
console.log("Counter ===> 相当于 vue2.x 中 destroyed")
},
onErrorCaptured() {
console.log("Counter ===> 相当于 vue2.x 中 errorCaptured")
}
}
function useCount(initCount) {
const state = reactive({ count: initCount })
console.log("state reactive", state)
const increase = () => { state.count++ }
const reset = () => { state.count = 0 }
return { state, increase, reset }
}
// 创建一个 跟组件 app
const App = createComponent({
// 这个就相对于 在另一个 .vue 文件 引用 Counter 组件，需要在 components 属性局部注册组件
components: {
Counter,
},
// 挂载到 App 模板中
template: `
计数器示例
`,
setup() {
console.log("App ===> 相当于 vue2.x 中 beforeCreated, created")
},
onBeforeMount() {
console.log("App ===> 相当于 vue2.x 中 beforeMount")
},
onMounted() {
console.log("App ===> 相当于 vue2.x 中 mounted")
},
onBeforeUpdate() {
console.log("App ===> 相当于 vue2.x 中 beforeUpdate")
},
onUpdated() {
console.log("App ===> 相当于 vue2.x 中 updated")
},
onBeforeUnmount() {
console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
},
onUnmounted() {
console.log("App ===> 相当于 vue2.x 中 destroyed")
},
onErrorCaptured() {
console.log("Counter ===> 相当于 vue2.x 中 errorCaptured")
}
})
// 启动
// container 就是相当于 new Vue() 中 el 元素
const container = document.querySelector("#app")
// createApp() 就是相当于 new Vue() 内部返回的就是 new Vue()
const app = createApp()
// 挂载组件
app.mount(App, container)
const { createComponent, createApp, reactive } = Vue
// 计数器组件
const Counter = {
props: {
initCount: {
type: Number,
default: 0
}
},
template: `
恭喜你，你已经写了
{{ state.count }}
斤代码！
`,
// 相当于 vue2.x beforeCreated, created
setup(props) {
const countOps = useCount(props.initCount)
console.log("Counter ===> 相当于 vue2.x 中 beforeCreated, created")
return { ...countOps }
},
onBeforeMount() {
console.log("Counter ===> 相当于 vue2.x 中 beforeMount")
},
onMounted() {
console.log("Counter ===> 相当于 vue2.x 中 mounted")
},
onBeforeUpdate() {
console.log("Counter ===> 相当于 vue2.x 中 beforeUpdate")
},
onUpdated() {
console.log("Counter ===> 相当于 vue2.x 中 updated")
},
onBeforeUnmount() {
console.log("Counter ===> 相当于 vue2.x 中 beforeDestroy")
},
onUnmounted() {
console.log("Counter ===> 相当于 vue2.x 中 destroyed")
},
onErrorCaptured() {
console.log("Counter ===> 相当于 vue2.x 中 errorCaptured")
}
}
function useCount(initCount) {
const state = reactive({ count: initCount })
console.log("state reactive", state)
const increase = () => { state.count++ }
const reset = () => { state.count = 0 }
return { state, increase, reset }
}
// 创建一个 跟组件 app
const App = createComponent({
// 这个就相对于 在另一个 .vue 文件 引用 Counter 组件，需要在 components 属性局部注册组件
components: {
Counter,
},
// 挂载到 App 模板中
template: `
计数器示例
`,
setup() {
console.log("App ===> 相当于 vue2.x 中 beforeCreated, created")
},
onBeforeMount() {
console.log("App ===> 相当于 vue2.x 中 beforeMount")
},
onMounted() {
console.log("App ===> 相当于 vue2.x 中 mounted")
},
onBeforeUpdate() {
console.log("App ===> 相当于 vue2.x 中 beforeUpdate")
},
onUpdated() {
console.log("App ===> 相当于 vue2.x 中 updated")
},
onBeforeUnmount() {
console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
},
onUnmounted() {
console.log("App ===> 相当于 vue2.x 中 destroyed")
},
onErrorCaptured() {
console.log("Counter ===> 相当于 vue2.x 中 errorCaptured")
}
})
// 启动
// container 就是相当于 new Vue() 中 el 元素
const container = document.querySelector("#app")
// createApp() 就是相当于 new Vue() 内部返回的就是 new Vue()
const app = createApp()
// 挂载组件
app.mount(App, container)转载自：https://zhuanlan.zhihu.com/p/95968847https://zhuanlan.zhihu.com/p/95968847
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
