uniapp vue3 ＜script setup＞ 用法总结

1.computed:

2.watch

  1.监听ref

  2.监听reactive

3.props,emit

4.生命周期函数

  1.vue生命周期函数

Vue2              vue3

beforeCreate  => setup()
created       => setup()
beforeMount   => onBeforeMount
mounted       => onMounted
beforeUpdate  => onBeforeUpdate
updated       => onUpdated
beforeDestroy => onBeforeUnmount
destroyed     => onUnmounted
activated     => onActivated
deactivated   => onDeactivated
errorCaptured => onErrorCaptured

2.小程序生命周期

5.页面传值、取值

1.传值和vue2一样

uni.navigateTo({
			url:"/pages/xx/index?id=1"
		})

2.取值

  setup无法导入onLoad,采用vue2 vue3结合写法通过getCurrentInstance()获取组件实例获取

6.directive

  钩子函数对比

Vue2                       vue3

bind                     created
inserted                 beforeMount
update                   mounted
componentUpdated         beforeUpdate
unbind                   updated
                         beforeUnmount
                         unmounted

1.局部注册

2.全局注册

  main.js

import {
	createSSRApp
} from 'vue'
export function createApp() {
	const app = createSSRApp(App);
	app.directive('input', {
            created(el,binding){
			    console.log(binding)
	     	},
			mounted(el, binding) {
				console.log(binding)
			},
			updated(el, binding) {
				console.log(binding)
			},


		})
	return {
		app
	}
}

7.provide\inject

//父组件





//子组件

 注意：inject()只能放在setup()生命周期里运行，诸如放在setTimeout或promise将获取失败

inject() can only be used inside setup() or functional components.

8.slot,attr 

9.sync,v-model

  统一用v-model:xxx

//父组件




//子组件

10.Vue原型绑定

//vue2

main.js:
Vue.prototype.$url = baseUrl;

页面调用：this.$url



//vue3

main.js:
const app = createSSRApp(App);
app.config.globalProperties.$url = baseUrl;

页面调用：

 

11.全局注册组件、使用插件

main.js:

import tabs from 'xxxxxx';//组件
import plug from 'xxxxxxx'//插件

//vue2：
import Vue from 'vue';
Vue.component("tabs",tabs)
Vue.use(plug)



//vue3
import { createSSRApp } from 'vue';

export function createApp() {

	const app = createSSRApp(App);
	app.component("tabs", tabs);
	app.use(plug);
	
    return {
		app
	}
}