Vue3框架开发

[zhaobinglong]

Vue2对比Vue3

vue3.0 的发布与 vue2.0 相比，优势主要体现在：更快、更小、更易维护、更易于原生、让开发者更轻松

初始化数据的方式不一样

export default {
  data(){
    // vue2中我们使用data然后ruturn一个函数的方式来初始化数据
    return{
        name: xxx
    }
  }
},

// 取而代之是使用以下的方式去初始化数据:
import {reactive} from 'vue' 
export default {
 setup(){
   const name = reactive({
     name:'hello 番茄'
   })
   return {name}
 }  
}

生命周期不一样

vue2中的beforeCreate和create周期取消，成为了setUp周期，Vue3中的生命周期，需要import进来才可以使用，不引入的话就不能喝使用。这也是为什么vue3压缩可以更低的原因

beforeCreate -> 请使用 setup()
created -> 请使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

数据劫持变更

放弃 Object.defineProperty ，使用更快的原生 Proxy；Proxy是ES6的语法

使用createApp创建实例

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

ref

计算属性computed

// 需要导入才可以使用
import { ref, computed } from 'vue'

单文件组件多个根结点

支持 Fragments (允许组件有从多个根结点)

[zhaobinglong]

删除filter过滤器

<template>
  <h1>Bank Account Balance</h1>
  <p>{{ accountInUSD }}</p>
</template>

<script>
  export default {
    props: {
      accountBalance: {
        type: Number,
        required: true
      }
    },
    computed: {
      accountInUSD() {
        return '$' + this.accountBalance
      }
    }
  }
</script>

使用utils封装函数代替filters

新建utils.js文件，添加函数

/**
     * 格式化UTC时间，输出YYYY-MM-DD
     *
     * @export
     * @param {*} str
     */
export function filterUTCTimeFormat (str) {
  const dateStr = new Date(str).toLocaleDateString().replace(/\//g, '-')
  let dateArr = dateStr.split('-')
  dateArr = dateArr.map(item => {
    return item.length <= 1 ? '0' + item : item
  })
  return dateArr.join('-')
}

在vue单文件组件中导入utils执行, 注意必须在methods中申明才可以使用

<div class="value">
    {{ filterUTCTimeFormat(item.visitTime) }}
</div>
import { filterUTCTimeFormat } from '@/libs/utils'
  methods: {
    filterUTCTimeFormat,
  }

参考

https://www.cnblogs.com/LittleT/p/10747281.html

[zhaobinglong]

生命周期变更

// setup接受两个参数，第一个参数是props， 另一个参数是context，
// 大家在使用2.0时习惯的在this下获取属性的方式 ，在 vue3.0 中需要改变成ctx
setup(props, ctx) {
  console.log(props, ctx)
}

[zhaobinglong]

数据响应式reactive

在Vue3中，我们可以把数据经过 reactive 加工变成响应式的对象，用于模版的渲染数据， 当然Vue的向下兼容 还是允许我们使用data的方式实现

const { reactive, toRefs } = Vue
let App = {
  template: `
    <div class="container">
        count: {{count}}
        <button @click="handlerCountAdd"> Click ++ </button>
    </div>`,
  setup() {
    const state = reactive({ count: 0 })
    const handlerCountAdd = () => {
      state.count++
    }
    return { ...toRefs(state), handlerCountAdd }
  }
}
Vue.createApp().mount(App, '#app')