vue3响应性基础 API

1、项目创建

官网需要vue-cli4+版本才能创建

由于还不会jsx,先使用vue3+typescript+template模式
网上还有一种tsx+vue模式 以下代码都使用vue3语法（vue3也可以使用vue2语法）

2、生命周期

 

 

 

<script lang="ts">
import { //现在使用的方法都要按需引入
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'

export default {
  name: "生命周期",
  setup() {
    console.log('1---setup,组件创建之前')
    onBeforeMount(()=>{
      console.log('2---onBeforeMount,组件挂载到dom前')
    })
    onMounted(()=>{
      console.log('3---onMounted,组件挂载到dom后')
    })
    //组件更新前后--比如数据更新后，会触发组件更新
    onBeforeUpdate(()=>{
      console.log('4---onBeforeUpdate,组件更新前')
    })
    onUpdated(()=>{
      console.log('5---onUpdated,组件更新后')
    })
    //组件销毁前后  节点删除或替换会触发
    onBeforeUnmount(()=>{
      console.log('6---onBeforeUnmount，卸载组件前')
    })
    onUnmounted(()=>{
      console.log('7---onBeforeUnmount，卸载组件后')
    })
  }
}
</script>

3、响应性基础 API

Refs

一般使用于基本类型

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1 //获取需要加上.value

类型声明： // ts

const foo = ref<string | number>('jhong') // foo's type: Ref<string | number>

foo.value = 123 // ok!

reactive

一般使用于引用类型

要为 JavaScript 对象创建响应式状态，可以使用 reactive 方法：(面向的是 js对象)

import { reactive } from 'vue'

// 响应式状态
const state = reactive({
  count: 0
})

ts，有数据类型的

<script lang="ts">
import {
  ref,
  reactive
} from 'vue'
//定义接口
interface TabTitleProps {
  list: string[],
  currentTitle: string,
  titleClick: (index: number) => void
}
export default {
  setup() {
    const tabTitle = reactive<TabTitleProps>({
      list: ['标题A', '标题B', '标题C'],
      currentTitle: '',
      titleClick: (index:number)=>{
        tabTitle.currentTitle = tabTitle.list[index]
      }
    })
    //可以理解为vue2中的data(){return{}}
    return {
      tabTitle
    }
  }
}
</script>

4、template

根路径不再是唯一

<template>
    <div></div>
    <div></div>
<template>

5、watch

watch API 与选项式 API this.$watch (以及相应的 watch 选项) 完全等效。watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用。默认情况下，它也是惰性的——即回调仅在侦听源发生更改时调用。

• 与 watchEffect 比较，watch 允许我们：

  • 惰性地执行副作用；
  • 更具体地说明应触发侦听器重新运行的状态；
  • 访问侦听状态的先前值和当前值。

• 以下代码都在setup方法内执行，要引入watch

5.1 监听单个值（ref）

// 侦听一个getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

// 直接侦听一个ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

5.2 监听多个值 (ref)

watch([fooRef, barRef], ([fooOld, bar], [newFoo, prevBar]) => {
  /* ... */
})

6、computed

const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // error

或者，它可以使用具有 get 和 set 函数的对象来创建可写的 ref 对象。

const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: val => {
    count.value = val - 1
  }
})

plusOne.value = 1
console.log(count.value) // 0

7、watchEffect

• 这个直接监听了所有值变化的问题
• 感觉这个比watch好用

const count = ref(0)

watchEffect(() => console.log(count.value))
// -> logs 0

setTimeout(() => {
  count.value++
  // -> logs 1
}, 100)

停止侦听

当 watchEffect 在组件的 setup() 函数或生命周期钩子被调用时，侦听器会被链接到该组件的生命周期，并在组件卸载时自动停止。

在一些情况下，也可以显式调用返回值以停止侦听：

const stop = watchEffect(() => {
  /* ... */
})

// later
stop()

8.1、全局挂载-方法一

• 我们在vue2中直接用prototype直接进行挂载。
• vue3挂载方法

//挂载全局实例
app.config.globalProperties.$test = 'test' 

在组件中使用

import {getCurrentInstance } from 'vue'
setup() {
    // ts proxy 使用
    const { proxy }: any = getCurrentInstance()
    console.log(36, proxy.$test)//test
    return {}
}