Vue3 知识总结

蓦然阑珊
194 阅读2分钟

vue3新语法糖——setup script

1, 自动注册子组件
2,属性和方法无需返回
3,支持props、emit和context

vue3插件

**插件：Vue 3 Snippets 和Vue Language Features (Volar)组件引入**
`volar` 是 `vue3` 的配套，`vetur` 是 `vue2` 的配套

useAttrs

顾名思义， useAttrs 可以是用来获取 attrs 数据的（也就是非 props 的属性值）。

defineExpose

  子组件向父组件暴露属性和方法
  父组件用ref属性接收

文件结构

Vue2中，`<template>` 标签中只能有一个根元素，在Vue3中没有此限制

data

<script setup> 
import { reactive, ref, toRefs } from 'vue'
// ref声明响应式数据，用于声明基本数据类型 
const name = ref('Jerry') 
// 修改
name.value = 'Tom' 
// reactive声明响应式数据，用于声明引用数据类型 
const state = reactive({ name: 'Jerry', sex: '男' }) 
// 修改 
state.name = 'Tom' 
// 使用toRefs解构 
const {name, sex} = toRefs(state) 
// template可直接使用{{name}}、{{sex}} 
</script>

method

<template> 
// 调用方法 
<button @click='changeName'>按钮</button> </template> 
<script setup> 
import { reactive } from 'vue' 
const state = reactive({ name: 'Jery' }) 
// 声明method方法 
const changeName = () => { state.name = 'Tom' }
</script>

computed

<script setup> 
import { computed, ref } from 'vue' 
const count = ref(1) 
// 通过computed获得doubleCount 
const doubleCount = computed(() => { 
   return count.value * 2 
}) // 获取 
console.log(doubleCount.value) 
</script>

watch

<script setup> 
import { watch, reactive } from 'vue' 
const state = reactive({ count: 1 }) 
// 声明方法 
const changeCount = () => { 
   state.count = state.count * 2 
   } 
// 监听count 
watch( 
  () => state.count, 
  (newVal, oldVal) => { 
  console.log(state.count)           
  console.log(`watch监听变化前的数据：${oldVal}`)    
  console.log(`watch监听变化后的数据：${newVal}`) 
  }, 
  { 
  immediate: true, // 立即执行 
  deep: true // 深度监听 
  } 
) 
</script>

父传子


// 声明props
const props = defineProps({ 
  name: { 
  type: String, 
  default: '' 
  } 
  })

子传父

// 声明事件 
const emit = defineEmits(['updateName']) 
const changeName = () => { 
   // 执行 
   emit('updateName', 'Tom') 
}

v-model

可绑定多个v-model
<child v-model="state.name" v-model:age="state.age" />

nextTick

import { nextTick } from 'vue' 
nextTick(() => { // ... })

ref子组件实例和defineExpose

  • 在标准组件写法里，子组件的数据都是默认隐式暴露给父组件的，但在 script-setup 模式下，所有数据只是默认 return 给 template 使用，不会暴露到组件外，所以父组件是无法直接通过挂载 ref 变量获取子组件的数据。
  • 如果要调用子组件的数据，需要先在子组件显示的暴露出来，才能够正确的拿到，这个操作，就是由 defineExpose 来完成。

子组件

<template>
  <span>{{state.name}}</span>
</template>

<script setup>
  import { reactive, toRefs } from 'vue'
  // defineExpose无需引入
  // import { defineExpose, reactive, toRefs } from 'vue'

  // 声明state
  const state = reactive({
    name: 'Jerry'
  }) 
	
  // 将方法、变量暴露给父组件使用，父组件才可通过ref API拿到子组件暴露的数据
  defineExpose({
    // 解构state
    ...toRefs(state),
    // 声明方法
    changeName () {
      state.name = 'Tom'
    }
  })
</script>

父组件

1. 获取一个子组件实例

<template>
  <child ref='childRef'/>
</template>

<script setup>
  import { ref, nextTick } from 'vue'
  // 引入子组件
  import child from './child.vue'

  // 子组件ref（TypeScript语法）
  const childRef = ref<InstanceType<typeof child>>()
  
  // nextTick
  nextTick(() => {
    // 获取子组件name
    console.log(childRef.value.name)
    // 执行子组件方法
    childRef.value.changeName()
  })
</script>

2. 获取多个子组件实例：在 v-for 中获取子组件实例

这种情况仅适用于 v-for 循环数是固定的情况 ，因为如果 v-for 循环数 在初始化之后发生改变，那么就会导致 childRefs 再一次重复添加，childRefs 中会出现重复的子组件实例

<template>
  <div v-for="item in 3" :key="item">
    <child :ref='addChildRef'/>
  </div>
</template>

<script setup>
  // 省略...
  
  // 子组件实例数组
  const childRefs = ref([])
  // 通过 addChildRef 方法向 childRefs 添加子组件实例
  const addChildRef = (el) => {
    childRefs.value.push(el)
  }
</script>

3. 获取多个子组件实例：动态 v-for 获取子组件实例

通过下标来向 childRefs 添加/修改，初始化之后，动态修改 v-for 循环数，会自动根据下标重新修改该下标对应的数据

<template>
  <button @click='childNums++'></button>
  <div v-for="(item, i) in childNums" :key="item">
    // 通过下标向 childRefs 动态添加子组件实例
    <child :ref='(el) => childRefs[i] = el'/>
  </div>
  <button @click='childNums--'></button>
</template>

<script setup>
  // 省略...
  
  // 子组件数量
  const childNums = ref(1)
  // 子组件实例数组
  const childRefs = ref([])
</script>

十、插槽slot

子组件

<template>
  // 匿名插槽
  <slot/>
  // 具名插槽
  <slot name='title'/>
  // 作用域插槽
  <slot name="footer" :scope="state" />
</template>

<script setup>
  import { useSlots, reactive } from 'vue'
  const state = reactive({
    name: '张三',
    age: '25岁'
  })
  
  const slots = useSlots()
  // 匿名插槽使用情况
  const defaultSlot = reactive(slots.default && slots.default().length)
  console.log(defaultSlot) // 1
  // 具名插槽使用情况
  const titleSlot = reactive(slots.title && slots.title().length)
  console.log(titleSlot) // 3
</script>

父组件

<template>
  <child>
    // 匿名插槽
    <span>我是默认插槽</span>
    // 具名插槽
    <template #title>
      <h1>我是具名插槽</h1>
      <h1>我是具名插槽</h1>
      <h1>我是具名插槽</h1>
    </template>
    // 作用域插槽
    <template #footer="{ scope }">
      <footer>作用域插槽——姓名：{{ scope.name }}，年龄{{ scope.age }}</footer>
    </template>
  </child> 
</template>

<script setup>
  // 引入子组件
  import child from './child.vue'
</script>

十二、路由useRoute和useRouter

<script setup>
  import { useRoute, useRouter } from 'vue-router'
	
  // 必须先声明调用
  const route = useRoute()
  const router = useRouter()
	
  // 路由信息
  console.log(route.query)

  // 路由跳转
  router.push('/newPage')
</script>

十三、路由导航守卫

<script setup>
  import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
	
  // 添加一个导航守卫，在当前组件将要离开时触发。
  onBeforeRouteLeave((to, from, next) => {
    next()
  })

  // 添加一个导航守卫，在当前组件更新时触发。
  // 在当前路由改变，但是该组件被复用时调用。
  onBeforeRouteUpdate((to, from, next) => {
    next()
  })
</script>

十四、store

*Vue3 中的Vuex不再提供辅助函数写法

<script setup>
  import { useStore } from 'vuex'
  import { key } from '../store/index'

  // 必须先声明调用
  const store = useStore(key)
	
  // 获取Vuex的state
  store.state.xxx

  // 触发mutations的方法
  store.commit('fnName')

  // 触发actions的方法
  store.dispatch('fnName')

  // 获取Getters
  store.getters.xxx
</script>
avatar
文章
阅读
粉丝