vue3随笔

一、setup()的出现替代了data和method

           setup函数接收两个参数是props，context

         1）props：props是响应式的，当传入新的prop时，它将被更新

                因为props是响应式的，不能使用解构赋值，这将消除其响应式

              如果需要解构，可以在setup函数中，使用toRefs函数

             import {toRefs} from “vue”

               setup(props){

                   const {title} = toRefs(props)

                   console.log(titile.value)

                 }

        如果title是可选的prop（props中可能没有title），利用toRef

        import { toRef } from “vue”

        setup(props){

                const title = toRef(props, “title”)

                console.log(title.value)

           }

        2）context：是普通js对象（可以解构），暴露组件的property

                context.attrs            // attribute

                context.slots            // 插槽

                context.emit            // 触发事件

        3）使用：

                在setup中return出来的对象，都可以在template里直接使用

                在setup里写的方法，也需要return出去

二、reactive()

reactive返回对象的响应式副本。reactive将解包所有深层refs，并维持ref的响应。

***：不管是reactive接收一个ref对象作为参数，还是对reactive的prototype进行赋 值一个ref对象，都将对Ref对象进行解包（ref.value === reactive.key）

***：返回的时候，返回...toRefs(data)，这样我们在template里就不用写data.xxx，可以 直接写内部的内容（解构）

三、vue3的生命周期和钩子函数（钩子函数需要import，在setup中写）

        Setup

                onBeforeMount（在组件挂载到页面之前）

                onMounted（在组件挂载到页面之后）

                onBeforeUpate（在组件更新之前执行）

                onUpdated（在组件更新之后）

                onBeforeUnmount（组件卸载之前执行）

                onUnmounted（组件卸载完成之后）

                onActivated（<keep-alive></keey-alive>激活时执行）

                onDeactivated（<keep-alive></keey-alive>消失时执行）

                onErrorCaptured（捕获到子孙组件异常）

***：<keep-alive>组件，会将数据放到内存中，如果我们不想每次重新加载页面都要重 新加载数据，可以使用

调试的生命周期：

        onRenderTracked（所有状态跟踪，有响应式数据改变就触发）接受一个参数，包含key

        onRenderTriggered（只跟踪一个值，我理解的是，页面视图数据变化触发）接受一个参 数，包含key，包含oldValue、newValue

四、computed和watch

1）computed

接受一个函数，并将其返回值包装成一个不变的响应式ref对象

const count = ref(1)

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

console.log(plusOne.value)

如果想要可写，需要写set和get

const count = ref(1)

const plusOne = computed( {

get: () => count.value + 1

set: (val) => {

count.value = val + 1

}

})

console.log(plusOne.value)

2）watchEffect

立即执行传入的函数，并在其依赖变更的时候重新运行该函数

const count = ref(0)

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

setTimeout(()=>{

count.value++       // 1

},100)

3）watch

1. 侦听数据源是getter：

const count = reactive({id:1})

watch( ()=> count.id, (value, oldValue) =>{

})

1. 侦听数据源是ref：

const count = ref(0)

watch(count, (value, oldValue) => {

})

1. 侦听多个数据源：

const firstName = ref(“”)

conset lastName = ref(“”)

watch([firstName, lastName], (value, oldValue)=>{

console.log(value, oldValue)

})

firstName.value = “John”     // [“John”,””]   [“”, “”]

lastName.value = “Smith”    // [“John”,” Smith”]   [“John”,””]

1. 侦听数组或对象

数组：

const list = reactive([1,2,3,4])

watch( () => [...list], (value, oldValue) =>{

})

对象：

const obj = reactive({})

watch (

() => count,

(value, oldValue) => {},

{deep: true}

)

也可以使用第三方深拷贝实现

const obj = reactive({})

watch (

() => _.cloneDeep(count),

(value, oldValue) => {}

)