vue3+ts dome学习记录（一）

创建自己的Vue3 dome

1. vue create my-project

2.选择自定义配置（未配置eslint）

3.一路enter，下载完运行

vue3 学习

1.defineComponent进行组件声明

import { defineComponent } from 'vue'

const MyComponent = defineComponent({
  name:'component'
})

2.setup 方法。

执行在beforecreated 之前。第一个参数props，父组件传来的值。第二个参数ctx，上下文对象，用于组件通信 ctx.emit()er。使用这两个参数须引入defineComponent

setup(props，ctx){
}

3. watchEffect 副作用

初始化的时候(mounted之前)会触发，数据改动时也会触发，相当于watch但是不用指定变量

    let num = ref(10)
    let sum=setTimeout(() => {
       num.value++
    }, 1000);
    watchEffect(()=>{
      console.log(num.value)
    })

停止副作用watchEffect

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

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

  let add =()=>{
      num.value++
      if (num.value==15){
        stop()
      }
    }
    const stop = watchEffect(()=>{
      console.log(num.value)
    })

清除副作用watchEffect

官方文档:有时副作用函数会执行一些异步的副作用，这些响应需要在其失效时清除 (即完成之前状态已改变了)。所以侦听副作用传入的函数可以接收一个 onInvalidate 函数作入参，用来注册清理失效时的回调。当以下情况发生时，这个失效回调会被触发：

• 副作用即将重新执行时
• 侦听器被停止 (如果在 setup() 或生命周期钩子函数中使用了 watchEffect，则在组件卸载时)

个人理解：副作用执行异步操作时，在异步触发之前，某些条件改变了，或者副作用被重新调用，此时副作用该停止运行。所有进行清除

 const stop = watchEffect(async(onInvalidate)=>{
      await new Promise<void>(function(resolve , reject){
        console.log(num.value);
        resolve();
      });
      onInvalidate(()=>{
        console.log("外部条件");
      })
    })

副作用刷新时机

• num.value 会在初始运行时同步打印出来
• 更改 num 时，将在组件更新前执行副作用。

如果需要在组件更新后重新运行侦听器副作用，我们可以传递带有 flush 选项的附加 options 对象 (默认为 'pre')：

watchEffect(
  () => {
   console.log(num.value);
  },
  {
    flush: 'post'
  }
)

flush 选项还接受 sync，这将强制效果始终同步触发。然而，这是低效的，应该很少需要。

4.生命周期

**注意：**vue3的生命周期钩子函数，必须在setup()函数内部使用.也可以在外部定义在函数内部，在setup()使用

import { onMoutend } from 'vue'
export default{
    setup(){
        onMoutend(()=>{
        /.../
        })
    }
}