vue3 script setup 语法糖

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.js
import { 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(() => {})