vue3笔记（1-2）基础写法

本篇是上一篇的延伸，使用 pinia 作为状态管理，对项目进行了一次升级。
使用 setup 语法糖进行组合式API的编写。

setup 语法糖

执行顺序：

1. 创建组件实例
2. props 解析
3. setup 调用执行（一次）
4. 组件创建 beforeCreate

<script lang="ts" setup>
const dataList = reactive({
  tableData: [],
  pageTotal: 0,
  query: { page: 1, pagesize: 10 }
})
const { tableData, pageTotal, query } = toRefs(dataList)
</script>

1. toRefs(dataList)，为对象属性添加响应式
2. 不需要 return 对象、方法等
3. 通过 defineProps 指定当前 props 类型，获得上下文 props 对象

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})

// 增加类型-不能使用default
const props = defineProps<{
  show: String
}>

自定义指令

需要对普通 DOM 元素进行底层操作，会用到自定义指令。

1. 全局自定义指令

   app.directive('focus',{
    mounted(el){
     el.focus()
    }
   })
   
   //组件使用
   <input type="text" v-focus />

2. 局部自定义指令
   binding 是一个对象，包含该指令的所有信息。（arg 自定义指令的参数名；value 自定义指令绑定的值；oldValue 指令绑定的前一个值；dir 被执行的钩子函数；modifiers：一个包含修饰符的对象）

   const defineDir = {
    focus: {
     mounted(el, binding){
       el.focus()
       el.style.left = binding.value.left+'px'
     }
    }
   }
   export default {
    directives: defineDir,
    setup(){
     const posData = {
      left:20
     }
    }
   }
   
   //组件使用
   <input type="text" v-focus />

3. 自定义指令中的生命周期钩子函数
   一个指令定义对象可以提供如下几个钩子函数（可选）:
   created ：绑定元素属性或事件监听器被应用之前调用。(eg: 附加在 v-on 事件监听器前调用的事件监听器时)。
   beforeMounted ：当指令第一次绑定到元素并且在挂载父组件之前执行。
   mounted ：绑定元素的父组件被挂载之后调用。
   beforeUpdate ：在更新包含组件的 VNode 之前调用。
   updated ：在包含组件的 VNode 及其子组件的 VNode 更新后调用。
   beforeUnmounted ：在卸载绑定元素的父组件之前调用
   unmounted ：当指令与元素解除绑定且父组件已卸载时，只调用一次。