Vue3

最近失业了，看网上招聘信息，对比自己的经历，四个短板，Vue3、React、TS、Webgis（估计与智慧城市有关，更多的webgis的招聘多起来了）

Vue3 ：https://cn.vuejs.org/guide/introduction.html#api-styles

组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。函数式编程

选项式API  就会通过不同选项和生命周期钩子函数割裂了代码逻辑，导致了代码复用的困难，并且去看逻辑的时候，通常要找到对应的生命周期里面函数方法，再去阅读代码

Vue 3 的主要变化：重写数据绑定、优化 VDOM 性能、支持 Fragments 和 Tree Shaking，并引入 Composition API。

问题1: setup2种方式以及区别

// 方式1
<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {
      count
    }
  },

  mounted() {
    console.log(this.count) // 0
  }
}
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

//方式2
<script setup>
      
</script>

2.特性

动态绑定多个值

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}
<div v-bind="objectOfAttrs"></div>

动态参数语法限制,我们需要避免在名称中使用大写字母，因为浏览器会强制将其转换为小写,另外避免空格和引号
1
2
3
4
 <a :['foo' + bar]="value"> ... </a> <a :[someAttr]="value"> ... </a>

响应式代理

vue2 在组件实例化的时候执行data方法，返回的响应式对象挂载在this上

vue3 则基于Proxy

export default {
  data() {
    return {
      someObject: {}
    }
  },
  mounted() {
    const newObject = {}
    this.someObject = newObject

    console.log(newObject === this.someObject) // false
  }
}

生命周期图
响应式声明

reactive() : 对象类型 ref ()：对象类型和基础类型都可以

修改的时候refVal.value

ref声明的需要用.value
watch 可以监听ref 也可以监听的是一个ref 或者一个computed 或者是一个getter函数或者是一个reactive对象或者多个数据源组成的数组

也一样有深度监听 {} flush dom监听以后在触发回调里面需要操作dom时候用到
watchEffect 自动收集依赖，会立刻运行一次，默认也是dom更新之前执行，如果要在dom运行之后执行，flush：post

初始化如果需要依赖dom更新后的数据，写在onmounted里面

返回值是停止监听的函数

watchEffect有点像computed:
- 但是computed更注重的是计算出来的值（回调函数的返回值），所以必须要写返回值
- 而watch更注重的是过程（回调函数的函数体），所以不用写返回值
app.component 注册

setup里面自动注册
emits 事件对象形式可以校验，但是不管校验通过不通过都会执行
provide 和inject 如果需要子组件改变父的 provide里面传递方法注入到子组件就可以了
useRoute 用于获取到route对象
选项式组件数据默认对外部是可见的，如果声明了expose选项，则只能访问expose暴露出去的属性和方法

组合式API <script setup> 默认是私有的,父无法访问，除非用defineExpose宏显示暴露出去的

vue 的几点思考
HTML 标签和属性名称是不分大小写的，所以浏览器会把任何大写的字符解释为小写

定义组件的几种写法，模板以及js jsx defineComponent export default vue

用到函数的地方

<script setup>

不需要导入的宏编译命令

defineProps 是一个仅 <script setup> 中可用的编译宏命令，并不需要显式地导入。声明的 props 会自动暴露给模板。defineProps 会返回一个对象，其中包含了可以传递给组件的所有 props：

defineEmits

命名：

props 优先驼峰

组件名 PascalCase 模板里面属性传参kebab-case 接收驼峰

触发事件

$emit(“someEvent”) @some-event

我们在 <template> 中使用的 $emit 方法不能在组件的 <script setup> 部分中使用，但 defineEmits() 会返回一个相同作用的函数供我们使用：

export default {
  emits: ['inFocus', 'submit'],
  setup(props, ctx) {
    ctx.emit('submit')
  }
}

验证

透传

const attrs = useAttrs()

defineOptions({ inheritAttrs: false }) 透传 v-bind="$attrs"

插槽插槽#号实际就是v-slot 对应的就是子组件slotname

子slot像父传送数据时候

v-slot=”slotProps” 默认的

v-slot:name=”slotProps” 终极形式

#name=”slotProps”

子孙传递

provide(‘key’, count)

应用层面

1	`app.provide(/* 注入名 / 'message', / 值 */ 'hello!')`

状态管理Pinia

更好的支持 TypeScript 更好支持Composition API 核心概念 getter state actions

代码片段

import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },
  // 也可以定义为
  // state: () => ({ count: 0 })
  actions: {
    increment() {
      this.count++
    },
  },
})

import { useCounterStore } from '@/stores/counter'

 count: computed(() => useCounterStore.count),

Vue3

vue 的几点思考

状态管理Pinia