2021-05-13

Vue3新特性

vue3支持的UI组件库

ant-design-vue是Ant Design的vue实现,组件风格与Ant Design保持同步
element Plus，一套为开发者、设计师和产品经理准备的基于Vue3的桌面端组件库
vant，轻量可靠的移动端Vue组件库，有赞团队开发维护4年
VueUse，基于composition组合api的常用组合

Vue3带来的新变化

性能提升：首次渲染更快、diff算法更快、内存占用更少、打包体积更小、更好的Typescript支持，在使用vue2.x版本开发较为复杂的组件时，逻辑难以复用，组合式api的出现可以解决此类问题

破坏性语法的更新

1.实例方法$on移除（eventBus现有实现模式不再支持，可以使用第三方插件替代）
2.过滤器filter移除（插值表达式里不能再使用过滤器 可以使用methods替代）
3. .sync语法移除（和v-model语法合并）

Vue3开发环境搭建

1.使用vue-cli搭建开发环境（当执行vue create 项目名称 失败时可能是vue-cli版本过低，执行npm i -g @vue/cli to update 来升级到最新版本）特别提醒：有的小伙伴使用的是yarn命令，那么后面窗口命令请保持一致，否则组件包适配不一致导致服务无法启动的情况会发生，做程序员不能脚踏两只船 npm、yarn专一
2.选择自定义配置
3.选中自定义安装版本
4.选择3.x版本
5.组合式api（Composition API）算是vue3对我们开发者来说非常有价值的一个api更新
特别注意：

1. 选项式api和组合式api俩种风格是并存的关系 并不是非此即彼
2. 需要大量的逻辑组合的场景，可以使用compition API进行增强
   6.setup入口函数
3. setup 函数是一个新的组件选项，作为组件中组合式API 的起点（入口）
4. 从生命周期角度来看，setup 会在 beforeCreate 钩子函数之前执行
5. setup 中不能使用 this， this 指向 undefined
   7.reactive函数 作用：reactive是一个函数，接收一个普通的对象传入，把对象数据转化为响应式对象并返回
   使用步骤：
6. 从vue框架中导入reactive函数
7. 在setup函数中调用reactive函数并将对象数据传入
8. 在setup函数中把reactive函数调用完毕之后的返回值以对象的形式返回出去
   8.ref函数 作用：ref是一个函数，接受一个简单类型或者复杂类型的传入并返回一个响应式且可变的 ref 对象
   使用步骤：
9. 从vue框架中导出ref函数
10. 在setup函数中调用ref函数并传入数据（简单类型或者复杂类型）
11. 在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去
12. 注意：在setup函数中使用ref结果，需要通过.value 访问，模板中使用不需要加.value
    9.toRefs函数（经过reactive函数处理之后返回的对象，如果给这个对象解构或者展开，会让数据丢失响应式的能力，为了解决这个问题需要引入toRefs函数，使用 toRefs函数 可以保证该对象展开的每个属性都是响应式的）
    10.computed 作用：根据现有响应式数据经过一定的计算得到全新的数据
    使用步骤：
13. 从vue框架中导入computed 函数
14. 在setup函数中执行computed函数，并传入一个函数，在函数中定义计算公式
15. 把computed函数调用完的执行结果放到setup的return值对象中
    11.watch监听器 作用：基于响应式数据的变化执行回调逻辑，和vue2中的watch的功能完全一致
    使用步骤：
16. 从vue框架中导入watch函数
17. 在setup函数中执行watch函数开启对响应式数据的监听
18. watch函数接收三个常规参数
    1. 第一个参数为函数，返回你要监听变化的响应式数据
    2. 第二个参数为响应式数据变化之后要执行的回调函数
    3. 第三个参数为一个对象，在里面配置是否开启立刻执行或者深度监听
       开启立刻执行，watch的效果默认状态下，只有监听的数据发生改变时才会执行回调，如果你需要在一开始就进行一次回调，需要配置一下immediate属性

<template>
  {{ age }}
  <button @click="age++">change age</button>
</template>
<script>
import { ref, watch } from 'vue'
export default {
  setup() {
    const age = ref(18)
    watch(() => {
      // 返回你想要监听的响应式属性(ref产生的对象必须加.value)
      return age.value
    }, () => {
      // 数据变化之后的回调函数
      console.log('age发生了变化')
    },{ immediate: true})
    return {
      age
    }
  }
}
</script> 

开启深度监听
当我们监听的数据是一个对象的时候，默认状态下，对象内部的属性发生变化是不会引起回调函数执行的，如果想让对象下面所有属性都能得到监听，需要开启deep配置

<template>
  {{ name }}
  {{ info.age }}
  <button @click="name = 'pink'">change name</button>
  <button @click="info.age++">change age</button>
</template>

<script>
import { reactive, toRefs, watch } from 'vue'
export default {
  setup() {
    const state = reactive({
      name: 'cp',
      info: {
        age: 18
      }
    })
    watch(() => {
      return state
    }, () => {
      // 数据变化之后的回调函数
      console.log('age发生了变化')
    }, {
      deep: true
    })
    return {
      ...toRefs(state)
    }
  }
}
</script> 

更好的做法： 使用watch的时候，尽量详细的表明你到底要监听哪个属性，避免使用deep引起的性能问题，比如我仅仅只是想在state对象的age属性变化的时候执行回调，可以这么写

<template>
  {{ name }}
  {{ info.age }}
  <button @click="name = 'pink'">change name</button>
  <button @click="info.age++">change age</button>
</template>

<script>
import { reactive, toRefs, watch } from 'vue'
export default {
  setup() {
    const state = reactive({
      name: 'cp',
      info: {
        age: 18
      }
    })
    watch(() => {
      // 详细的告知你要监听谁
      return state.info.age
    }, () => {
      // 数据变化之后的回调函数
      console.log('age发生了变化')
    })
    return {
      ...toRefs(state)
    }
  }
}
</script> 

好啦。今天太累了，先写到这里吧，后面新函数我们在下期整理。下一期