Vue3

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

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

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

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

1.重写数据绑定2. vdom性能优化 3.framents的支持 4.tree-shaking 5.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

用到函数的地方

初识Vue3

Vue3

vue 的几点思考