【vue3系列】vue3快速入门教程

Vue3入门

• 根实例初始化不同

  • 2.x中通过new Vue()的方法来初始化

    • import App from './App.vue'
      new Vue({
      	store,
      	render:h => h(App)
      }).$mount('#app')
      

  • 3.x中vue不再是一个构造函数，通过createApp方法初始化

    • import App from './App.vue'
      createApp(App).use(store).mount('#app')
      

• ref或者reactive代替了data中的变量：

  • 在2.x中通过组件data的方法来定义一些当前组件需要的数据：

    • data(){
      	return{
      		name:'test',
      		list:[]
      	}
      }
      

  • 在3.x中通过ref或者reactive创建响应式对象：

    • import {ref,reactive} from 'vue'
      
      setup(){    //在setup中去定义参数，然后return出去
      	const name = ref('test')
      	const state = reactive({
      		list:[]
      	})
      	return {
      		name,
      		state
      	}
      }
      
      ref将给定的值创建一个响应式的数据对象并复制初始值(int/string),reactive可以直接定义复杂的响应式对象
      

• methods中定义的方法也可以写在setup中

  • 在2.x中methods来定义一些当前组件内部方法

    • methods:{
      	getData(){
      		//
      	},
      }
      

  • 在3.x中直接在setup方法中定义并return

    • setup(){
      	const getData = ()=>{
      		console.log('getData')
      	}
      	
      	return{
      		getData
      	}
      }
      

• 不能使用EventBus

  • 在2.x中通过EventBus的方法来实现组件通信

    • var EventBus = new Vue()
      Vue.prototype.$EventBus = EventBus
      
      this.$EvenetBus.$on()   this.$EventBus.$emit()
      

  • 在3.x中移除了$on，$off等方法，而是推荐使用mitt方案来代替

    • import mitt from 'mitt'
      const emitter = mitt()
      //监听一个事件
      emitter.on('foo',e =>console.log('foo',e))
      //触发事件
      emitter.emit('foo',{a:'b'})
      
      由于3.x中不再支持prototype的方式给Vue绑定静态方法，可以通过`app.config.globalProperties.mitt = () =>{}方案`
      

• setup()中使用props和this

  • 在2.x中，组建的方法中可以通过this获取当前组件的实例，并执行data变量的修改，方法的调用、组建的通信等，但在3.x中，setup()在beforeCreate和created时机就已经调用，无法使用和2.x一样的this，但是可以通过接收setup(props,ctx)的方法，获取当前组件的实例和props

    • export default{
      	props:{
      		name:String,
      	},
      	setup(props,ctx){
      		console.log(props.name)
      		ctx.emit('event')
      	}
      }
      
      ctx和2.x中的this并不完全一样，而是选择性地暴露了一些property,主要有[attrs,emit,slots]
      

• watch来监听对象改变

  • 2.x中，可以采用watch来监听一个对象属性是否有改动

    • data(){
      	return{
      		name:'a'
      	}
      },
      watch:{
      	name(val){
      		console.log(val)
      	}
      }
      

  • 3.x中，在setup()中，可以使用watch来监听

    • import {watch} form 'vue'
      setup(){
      	let state = reactive({
      		name:
      	})
      }
      

vue3初探

性能提升

• proxy响应式
  • 响应式原理由Object.defineProperty改为基于ES6的Proxy
  • 优点：能够规避Object.defineProperty的问题
    • 深度监听:性能更好，不会递归到底而是在get到这个层级才会去递归
    • 可监听数组变化
    • 可监听新增、删除属性
    • 但无法兼容所有浏览器并无法polyfill
• patchFlag静态标记
  • 编译模板时给动态节点做标记
  • diff算法时值会对比标记的节点
• hoistStatic静态提升
  • 将静态节点的定义，提升到父作用域，缓存起来
  • 多个相邻的静态节点会被合并起来
• cacheHandle缓存事件
  • 默认情况下@click也会进行动态标记
  • 增加cacheHandle会对事件进行缓存且没有PatchFlag未开启cacheHandler
• SSR优化
  • 静态节点直接输出绕过了vdom
  • 动态节点动态渲染
• tree shaking
  • 编译时根据不同的情况下引入不同的API，没用到的api会进行剔除。

Composition API：组合API

• 更好的代码组织和逻辑复用

• setup:Composition API的入口点

• 响应式API：reacitve、ref、computed、readonly、watch、watchEffct等

• 新的生命周期函数：onMounted、onUpdated、onUnmounted等

• 

• 自定义函数hooks函数

其他新增特性

• Teleport：瞬移组件的位置
• Suspense：异步加载组件

更好的TS支持

优势

• vue2存在复杂组件的代码变得难以维护并且对TS的支持有限
• vue3的性能更好、体积更小、更好的TS支持、更好的代码组织和逻辑抽离。