Loong Panda

<script setup> 是在单文件组件 (SFC) 中使用 组合式 API 的编译时语法糖。相比于普通的 <script> 语法，它有更简洁的代码，由于处于同一作用域，因此的运行时性能会更好。

响应式变量

<script setup>	// vue3和vue2最大的区别就是响应式变量  import { ref, toRef, toRefs, reactive, onMounted } from 'vue';  const val1 = ref(0); // 创建任意数据类型的响应式变量  const val2 = reactive({ num: 1 }); // 创建引用类型的响应式对象  const { newVal } = toRefs(val2); // 将响应式对象转换为普通对象  const val3 = toRef(val2, 'num'); // 将响应式对象num2中num字段创建为一个新的响应式变量  onMounted(() => {    val1.value = Date.now(); // 修改ref创建的变量    val2.num = Date.now() // 修改reactive创建的变量  });</script>

函数

<template>	<el-button size="small" @click="onClick">点击</el-button></template><script setup>    function onClick() {    // ....  };</script>

计算属性（computed）

<script setup>  import { computed, ref } from 'vue'  const num = ref(1)  const calc = computed(() => {  	return num.value * 2  })</script>

观察属性（watch）

<script setup>  import { watch, reactive } from 'vue'  const obj = reactive({  	count: 1  })  // 监听count  watch(  	() => obj.count,  	(newVal, oldVal) => {          },    {      immediate: true, // 立即执行      deep: true // 深度监听    }  )</script>

父子组件传值 props 和 emit

子组件  <template>  <span>{{ dataId }}</span> // 展示父级传递过来的参数  <el-button size="small" @click="onUpdate">更新</el-button></template><script setup>  // 声明 props  const props = defineProps({    dataId: {      type: String,      default: ''    }  })  // 声明 emit 事件，事先需要声明好事件名，如on-update  const emit = defineEmits(['on-update'])  const onUpdate = () => {    // 执行 on-update 事件    emit('on-update', Date.now())  }</script>父组件<template>	<child :data-id="chidDataId" @on-update="onUp"></child></template><script setup>  import child from './child.vue';  import { ref } from 'vue';  const chidDataId = ref(100)  // 接收子组件触发的方法  function onUp(name) {  	//  }</script>

七、双向绑定 v-model

子组件

<template>

<span @click="changeInfo">我叫{{ modelValue }}，今年{{ age }}岁</span>

</template>

<script setup>

// import { defineEmits, defineProps } from 'vue'

// defineEmits和defineProps在<script setup>中自动可用，无需导入

// 需在.eslintrc.js文件中【globals】下配置【defineEmits: true】、【defineProps: true】

defineProps({

modelValue: String,

age: Number

})

const emit = defineEmits(['update:modelValue', 'update:age'])

const changeInfo = () => {

// 触发父组件值更新

emit('update:modelValue', 'Tom')

emit('update:age', 30)

}

</script>

父组件

<template>

// v-model:modelValue简写为v-model

// 可绑定多个v-model

<child v-model="state.name" v-model:age="state.age"></child>

</template>

<script setup>

import child from './child.vue'

import { reactive } from 'vue'

const state = reactive({

name: 'Jerry',

age: 20

})

</script>

路由

<script setup>  import { useRoute, useRouter } from 'vue-router'  const route = useRoute();  const router = useRouter();	// 路由跳转  router.push('/home')  	// 获取路由实例，及路由信息  console.log(route.query)  </script>

路由守卫

<script setup>  import { onBeforeRouteLeave, onBeforeRouteEnter } from 'vue-router'  onBeforeRouteLeave((to, from, next) => {    next()  })  onBeforeRouteEnter((to, from, next) => {  	next()  })</script>

全局状态管理器

<script setup>  import { useStore } from 'vuex'  const store = useStore()  // 获取state  store.state.xxx  // 触发mutations的方法  store.commit('fnName')  // 触发actions的方法  store.dispatch('fnName')  // 获取Getters  store.getters.xxx</script>

原型挂载/绑定与使用

----绑定--------------------------------------------------------------------// main.jsimport { createApp } from 'vue'import App from './App.vue'const app = createApp(App)// 获取原型const prototype = app.config.globalProperties// 绑定参数prototype.$ajax = ajax----使用--------------------------------------------------------------------<script setup>  import { getCurrentInstance } from 'vue'  const { proxy } = getCurrentInstance()  proxy.$ajax(url, {})    .then(res => {  		// .....  	})</script>

生命周期

vue3和vu2周期最大的区别是vue3用setup替代了beforeCreate 和 created，通俗的说fa就是说原来在beforeCreate 和 created写的代放在码在setup里就行了。其他的周期使用前缀“on”，

比如： onMounted(() => {})

选项式 API

Hook inside setup

beforeCreate

Not needed*

created

Not needed*

beforeMount

onBeforeMount

mounted

onMounted

beforeUpdate

onBeforeUpdate

updated

onUpdated

beforeUnmount

onBeforeUnmount

unmounted

onUnmounted

errorCaptured

onErrorCaptured

renderTracked

onRenderTracked

renderTriggered

onRenderTriggered

activated

onActivated

deactivated

onDeactivated