新手学习网站建设,黄浦网站建设,衡水做wap网站的地方,低价网站建设要多少钱目录开篇#xff1a;1.什么是setup2.setup怎么使用3.setup中包含的生命周期函数3.setup相关参数4.setup特性总结总结开篇#xff1a;
从vue2升级 vue3#xff0c;vue3是可以兼容vue2。所以v3可以采用v2的选项式api#xff0c;但是v2不能使用v3的组合式api#xff0c;由于…
目录开篇1.什么是setup2.setup怎么使用3.setup中包含的生命周期函数3.setup相关参数4.setup特性总结总结开篇
从vue2升级 vue3vue3是可以兼容vue2。所以v3可以采用v2的选项式api但是v2不能使用v3的组合式api由于选项式api一个变量存在于多处如果出现问题就需要去涵盖多个函数。项目越大排查的难度也就越大。 1.什么是setup
setup用来写组合式api从生命周期的角度相当于取代了beforeCreate()
2.setup怎么使用
1.setup() / {} 内部的属性和方法必须使用return暴露出来。将属性挂载到实例上否则没有办法使用。
2.语法糖写在script开始标签中内部的属性和方法无需return暴露无法和选项式api混用
3. 钩子函数可以和setup并列存在 setup不能调用生命周期相关的函数。
生命周期相关函数可以调用setup相关的属性和方法可以使用this或者嵌套存在。3.setup中包含的生命周期函数 onBeforeMount——挂载开始前调用 onMounted——挂载后调用 onBeforeUpdate——当响应数据改变且重新渲染前调用 onUpdated——重新渲染后调用 onBeforeUnmount——Vue实例销毁前调用 onUnmounted——实例销毁后调用 onActivated——当keep-alive组件被激活时调用 onDeactivated——当keep-alive组件取消激活时调用 onErrorCaptured——从子组件中捕获错误时调用 相关代码
//选项式写法
script
export default{props: [subtitle],data: () ({age: 30}),methods: {showMessage() {console.log(函数 HELLO); }},// 组件实例话之前// 可以访问 props 的数据的// 不能访问组件的实例 this 中的数据源和函数等// 不能访问组件中的视图DOM元素beforeCreate() {console.log(----------------------------)console.log(beforeCreate 组件实例话之前)console.log(this.$props.subtitle)console.log(不能访问组件的实例 this 中的数据源和函数等);console.log(不能访问组件中的视图DOM元素);// console.log(this.age)// this.showMessage()// console.log(document.getElementById(title).innerHTML)},// 组件实例话之后// 可以访问组件中的数据函数自定义的属性等// 不能访问组件中的视图DOM元素created() {console.log(----------------------------)console.log(created 组件实例话之后)console.log(this.$props.subtitle)console.log(this.age)this.showMessage()console.log(不能访问组件中的视图DOM元素);// console.log(document.getElementById(title).innerHTML)},// 组件视图渲染之前// 可以访问组件中的数据函数自定义的属性等// 不能访问组件中的视图DOM元素beforeMount() {console.log(----------------------------)console.log(beforeMount 组件视图渲染之前)console.log(this.$props.subtitle)console.log(this.age)this.showMessage()console.log(不能访问组件中的视图DOM元素);// console.log(document.getElementById(title).innerHTML)},// 组件视图渲染之后// 可以访问组件中的数据函数自定义的属性等// 不能访问组件中的视图DOM元素mounted() {console.log(----------------------------)console.log(mounted 组件视图渲染之后)console.log(this.$props.subtitle)console.log(this.age)this.showMessage()console.log(document.getElementById(title).innerHTML)},// 数据源发生改变视图重新渲染前// 可以访问组件中的数据函数自定义的属性等// 可访问重新渲染的 DOM 元素之前的状态beforeUpdate() {console.log(----------------------------)console.log(beforeUpdate 数据源发生改变视图重新渲染前)console.log(this.$props.subtitle)console.log(this.age)this.showMessage()console.log(document.getElementById(title).innerHTML)},// 数据源发生改变视图重新渲染后// 可以访问组件中的数据函数自定义的属性等// 可访问重新渲染的 DOM 元素之后的状态updated() {console.log(----------------------------)console.log(updated 数据源发生改变视图重新渲染后)console.log(this.$props.subtitle)console.log(this.age)this.showMessage()console.log(document.getElementById(title).innerHTML)},// 组件在卸载之前// 可以访问组件中的数据函数自定义的属性等// 可访组件视图的 DOM 元素beforeUnmount() {console.log(----------------------------)console.log(beforeUnmount 组件在卸载之前)console.log(this.$props.subtitle)console.log(this.age)this.showMessage()console.log(document.getElementById(title).innerHTML)},// 组件已卸载// 可以访问组件中的数据函数自定义的属性等// 不可访组件视图的 DOM 元素unmounted(){console.log(----------------------------)console.log(unmounted 组件已卸载)console.log(this.$props.subtitle)console.log(this.age)this.showMessage()console.log(不能访问组件中的视图DOM元素);// console.log(document.getElementById(title).innerHTML)}
}
/scripttemplateh3 idtitlei年龄{{ age }}/i/h3button click(age 70)年龄改成 70/buttonbutton click(age 30)年龄改成 30/button
/template// 组合式写法
script setup
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from vue;let age ref(30)function showMessage() {console.log(HELLO)
}// 组件视图渲染之前
// 能访问组件实例的东西数据源、函数等
// 但是不能访问组件视图中的 DOM 元素
onBeforeMount(() {console.log(------------------------)console.log(onBeforeMount 组件视图渲染之前生命周期钩子)console.log(age.value)showMessage()console.log(不能访问组件视图中的 DOM 元素);// console.log(document.getElementById(title).innerHTML)
})// 组件视图渲染之后
// 能访问组件实例的东西数据源、函数等
// 可以访问组件视图中的 DOM 元素
onMounted(() {console.log(------------------------)console.log(onMounted 组件视图渲染之后生命周期钩子)console.log(age.value)showMessage()console.log(document.getElementById(title).innerHTML)
})// 数据源发生变化组件视图重新渲染之前
// 能访问组件实例的东西数据源、函数等
// 能访问组件视图渲染之前的 DOM 元素
onBeforeUpdate(() {console.log(------------------------)console.log(onBeforeUpdate 数据源发生变化组件视图重新渲染之前生命周期钩子)console.log(age.value)showMessage()console.log(document.getElementById(title).innerHTML)
})// 数据源发生变化组件视图重新渲染之后
// 能访问组件实例的东西数据源、函数等
// 能访问组件视图渲染之后的 DOM 元素
onUpdated(() {console.log(------------------------)console.log(onUpdated 数据源发生变化组件视图重新渲染之后生命周期钩子)console.log(age.value)showMessage()console.log(document.getElementById(title).innerHTML)
})// 组件卸载之前
// 能访问组件实例的东西数据源、函数等
// 能访问组件视图 DOM 元素
onBeforeUnmount(() {console.log(------------------------)console.log(onBeforeUnmount 组件卸载之前生命周期钩子)console.log(age.value)showMessage()console.log(document.getElementById(title).innerHTML)
}) // 组件卸载之后
// 能访问组件实例的东西数据源、函数等
// 不能访问组件视图 DOM 元素
onUnmounted(() {console.log(------------------------)console.log(onUnmounted 组件卸载之后生命周期钩子)console.log(age.value)showMessage()console.log(不能访问组件视图中的 DOM 元素);// console.log(document.getElementById(title).innerHTML)
}) /scripttemplateh3 idtitlei年龄{{ age }}/i/h3button click(age 70)年龄改成 70/buttonbutton click(age 30)年龄改成 30/button
/template3.setup相关参数
使用setup时她讲接受两个参数props和context props 1. 表示父组件给子组件传的数据 2. props是响应式的当数据发送改变时自动更新 3. 因为props是响应式的不能使用es6的解构会消除响应式特性(使用toRefs)context context 上下文环境。其中包括了属性插槽自定义事件三部分attrs是一个非响应式对象只要接受no-props属性。经常用来传递一些样式/标签特有属性solts是一个Proxy对象其中slots.default()获取到一个数组。数组长度表示插槽的数量 数组中的元素时插槽的内容。emit因为setup没有this所以使用emit开替换之前的this.$emit。用于子传父时自定义事件的触发 示例emit(“自定义事件名”传递的值)
4.setup特性总结 1. 这个函数会在created之前执行 2. setup内部没有this不能挂载相关的东西 3. setup内部的属性和方法必须return暴露出来。(语法糖不需要) 4. setup内部的属性都不是响应式的 5. setup不能调用生命周期相关函数但生命周期相关函数可以调用setup 总结
以上就是Vue3.0 setup的使用及作用。希望本篇文章能够帮助到你不懂得可以评论区或者私信问我我也会一 一解答。谢谢观看 我的其他文章:https://blog.csdn.net/m0_60970928?typeblog
