Vue3新特性_能够把组件直接to到某个dom的vue3新特性是

Ref语法

ref是一个函数，接受一个参数(一般传入原始类型)，返回一个响应式对象

<template>
  <div id="nav">
    <p>{{count}}</p>
    <button @click="increase">click</button>
  </div>
  <router-view />
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
export default defineComponent({
  setup () {
    const count = ref(0)
    const increase = () => {
      count.value++
    }
    return {
      count,
      increase
    }
  }
})
</script>
<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Reactive函数

Reactive函数可以接受复杂类型，可直接传入一个对象。但是如果将返回的值，进行解构再使用，会使其失去响应式。可通过toRefs()函数解决

<template>
  <div id="nav">
    <p>{{count}}</p>
    <p>{{double}}</p>
    <button @click="increase">click</button>
  </div>
  <router-view />
</template>

<script lang="ts">
import { computed, defineComponent, reactive, toRefs } from 'vue'
interface DataProps {
  count: number;
  double: number;
  increase: () => void;
}
export default defineComponent({
  setup () {
    const data: DataProps = reactive({
      count: 0,
      increase: () => {
        data.count++
      },
      double: computed(() => data.count * 2)
    })
    const refData = toRefs(data)
    return {
      ...refData
    }
  }
})
</script>
<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

vue3生命周期

beforeCreate --> use setup()
created --> use setup()
beforeMount --> onBeforeMount()
mounted --> onMounted()
beforeUpdate --> onBeforeUpdate()
updated --> onUpdated()
beforeDestory --> onBeforeUnMount()
destoryed --> onUnMounted()
activated --> onActivated()
deacticated --> onDeactivated()
errorCaptured --> onErrorCaptured


// added  用于调试 观测数据变化
onRenderTracked
onRenderTriggered

// 一般都是以一个回调函数作为参数
eg: 
onMounted(() => {
      console.log('onmounted')
})
onUpdated(() => {
  console.log('onUpdated')
})
onRenderTriggered((event) => {
  console.log(event)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

watch

// 监听一个值
watch(greeting, (newValue, oldValue) => {
      console.log('new==>', newValue)
      console.log('old==>', oldValue)
})
// 监听一个数组
watch([greeting, data], (newValue, oldValue) => {
  console.log('new==>', newValue)
  console.log('old==>', oldValue)
})
// 监听某个对象中的某个属性
watch([greeting, () => data.count], (newValue, oldValue) => {
  console.log('new==>', newValue)
  console.log('old==>', oldValue)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

defineComponent

对ts比较友好的一个方法，用于包裹属性

Teleport

// 可直接将组件传送到某个DOM元素上
// teleport标签上有个to属性，里面接收一个css query selector 作为参数
<teleport to="#modal">
  <div id="center">
    <h1>this is a modal</h1>
  </div>
</teleport>
1
2
3
4
5
6
7