vue3的优势

vue3的优势

性能更好 更好的代码组织
体积更小 更多新功能
更好的typescript支持
更好的类型推导

data(){
    return{
            a：20;
    }
  },
methods:{
    fn(){
      const num = this.a;
    }
  },
mounted(){
      this.fn() //vue2中this.methods.fn()获取
  }

Options API生命周期

beforedestroy改成beforeUnmounted
destroyed改成unmounted

为什么将vue2的Options API改成Composition API

Composition API带来了什么
更好的逻辑复用

vue3的升级

createApp

image.png

emits属性
emits主要作用在子组件中，用于接收在父组件中绑定的方法。
父组件

<hello :msg="msg" @onHello="onHello">

子组件

props:{
    msg:String
  },
emits:['onHello'],
setup(props,{emit}){
emit('onHello','vue3333')
}

多事件处理

如点击一次可以触发多个函数

<button @click="one(event1)  two(event2)">
按钮
</button>

watch和watchEffect的区别

都可以监听data属性
watch需要明确监听哪个属性
watchEffect会根据其中的属性，自动监听其变化
watchEffect初始化一定执行一次，因为他要收集其数据选择需要监听的属性
写哪个属性就去监听哪个

setup中如何获取组件实例

• 在setup和composition api中并没有this
  可通过getCurrentInstance来获取组件实例

setup函数执行于beforeCreate和created之前，也就是说setup函数里面无法使用data和methods方法中的数据 可以在monuted中去获取

SSR优化

就是静态节点直接转换为字符串，而不用走虚拟dom逻辑。

什么是vite

一个前端打包工具，和webpack竞争，优势开放环境无需打包，启动很快（因为使用es6 module）

jsx和template的区别

语法上有区别，本质上是相同的
jsx本事就是js代码，可以使用js的所有能力
template只能嵌入简单的js表达式，如v-if

jsx扩展性更好

slot插槽

vue发明的概念，为了完善template的能力