[JavaScript知识库]菜鸟初学vue3

? ? ? ? 或许有许多人问Vue3和Vue2有什么区别，其实Vue3兼容大部分Vue2的语法和书写规则。接下来我们就来看看Vue3和Vue2中不同的地方。

1，启动方式

• Vue2的启动方式是通过new Vue的方式来进行的，而Vue3是通过createAPP.use()的方式来启动的

2，全局方法

• Vue2中需要在main.js配置? ?Vue.prototype.$functionname = xxxx来实现
• Vue3是通过app.config.globalProperties.$functionname

3，setup

? ? ? ? 在Vue3中setup是为了使用组合API，在beforeCreate之前就被调用，并且在setup中没有this。

? ? ? ? setup中的两个参数props 和context

? ? ? ? ? ? ? ? （1）props代表了组件被传入的参数

? ? ? ? ? ? ? ? （2）context是一个对象，其中attrs是属性，emit发送事件，slots是插槽

4，ref/reactive

? ? ? ? ref定义值类型，在setup中要使用value值访问

????????

const num = ref(3);

这里num的默认值是3。

? ? ? ? reactive定义引用类型

const list = reactive([....])

5,computed

? ? ? ? computed计算属性

? ? ? ? 可以通过computed返回一个值

computed({
    return ...
})

? ? ? ? 同时computed中还存在get和set两个函数

computed({
    get(){
        return ...
},
    set(v){
    .......
}
})

vue3中计算属性的函数中如果只传入一个回调函数，表示的是get，vue3中计算属性的函数中如果传入一个对象，表示的是get和set。

6，watch

? ? ? ? 既然computed已经出现了，那么接下来就看看watch

watch和Vue2中的用法大致相同

computed({
			get(){return xxxx},
			set(v){
					........
}
})

watchEffect

在回调函数中用的数据，都会监听

watchEffect（（）=>{.....}）

7，生命周期

onMounted? ? 挂载、

onUpdated? ? 更新

onUnmout? ? ?卸载