Vue3.0基本语法简单整理(对比2.0语法)

如果现在想在vue-cli上使用vue3.0语法，首先你的cli版本必须为4,然后打开你的项目终端

vue add vue-next

这样我们就可以使用3.0语法了

先说一下3.0的setup

核心函数,它的执行时机是在beforeCreate之后和created之前，
很多代码都必须写在这个函数中,并且如果要在组件的template中使用，
那么就必须在setup中return出去,像data,computed,methods都要写在这里

一.2.0data

2.0定义变量是这样

 data() {
    return {
      msg:'你好',
    }
  },

3.0

import {reactive} from 'vue'
	 setup(){
	    const state = reactive({
	      msg2:'你好啊',
	    })
	  }
	  
reactive:接收一个普通对象然后返回该普通对象的响应式代理。等同于 2.x 的 Vue.observable()

也可以这样定义变量

import {ref} from 'vue'
const msg3 = ref('你好不好')

别忘了导出

 return {
      msg3,
      state
}

在template使用方法一样

{{msg}}
{{msg2}}
{{msg3}}

二.2.0methods,比如我们想更改msg的值

<button @click="changeMsg()">vue3.0(更改msg的值)</button>
<button @click="changeMsg1()">vue2.0(更改msg的值)</button>

2.0写方法

  methods: {
    changeMsg1(){
      this.msg = 'msg1被改了'
    }
  },

3.0写方法

import {reactive,ref,toRefs} from ‘vue’

setup(){
 const changeMsg =()=>{
      state.msg2 = 'msg2被改了'
      msg3.value ='msg3被改了'
    }
}
注:ref定义的变量，改变值要.value,而且在template中不用写.value

导出
return {
  msg3,
  // toRefs变为响应式
  ...toRefs(state),
  changeMsg,
}
注:state要被toRefs包裹，要不然页面不会发生变化

三.2.0computed,比如定义一个数字，点击+1

2.0写法

{{doubleNum}}

data() {
   return {
   num:1
}
},
computed: {
  doubleNum1(){
    return this.num *3
}

},

3.0写法

{{doubleNum}}

import {reactive,toRefs,computed} from 'vue'

setup(){
const state = reactive({
      num:1,
    })
 const doubleNum = computed(()=>{
      return state.num *2
    })
}
 return {
  // toRefs变为响应式
  ...toRefs(state),
  doubleNum
}

还有一种简便的写法

setup(){
const state = reactive({
  num:1,
  doubleNum:computed(()=>state.num *2)
  })
 } 
也不用导出doubleNum，因为我们导出了...toRefs(state)

四.2.0watch，点击数字+1监听值的改变

2.0写法

data() {
    return {
      num:1
    }
  },
 methods: {
    addNum(){
      this.num++
    }
  },
watch: {
num(newVal){
 console.log(newVal)
}
},

3.0写法

import {reactive,toRefs,watch} from 'vue'

setup(){
const state = reactive({
      num:1,
    })
const addNum = ()=>{
      state.num++
    }
watch(()=>state.num,(newValue,oldValue)=>{
    console.log(newValue)
    })
}
注:3.0还没发布deep属性
 return {
      // toRefs变为响应式
      ...toRefs(state),
      addNum,
}

五.生命周期，左边2.0，右边3.0

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

注:3.0使用的话也要导入

六.2.0props,父组件向子组件传递参数

创建一个children.vue子组件

import children from './children'

 components:{
    children
  }
components是一摸一样的，而且不用写在setup中

<children :msg="msg2"/>
传参方式也一样，但是接收参数不一样

2.0接收参数

props:{
    msg:{
    type:String,
    default(){
      return ''
    }
    }
  },
template使用
{{msg}}

3.0接收参数

import {reactive} from 'vue'
  props:{
    msg:{
    type:String,
    default(){
      return ''
    }
    }
  },
setup(props) {
    const state = reactive({
       myMsg:props.msg
    })
    return {
      ...state
    }
  }
//props中有一个值

template使用
{{myMsg}}

七.跨组件通信provide,inject

这个就直接说3.0怎么用了

import {provide} from 'vue'

setup(){
 provide('msg','你是一只小小小小鸟')
}

<children/>

children子组件

import {reactive,inject} from 'vue'

 setup(props) {
    const state = reactive({
      myMsg:inject('msg')
    })
    return {
      ...state
    }
  }
template中使用
{{myMsg}}

而且这种方式可以一直传递，孙组件也能使用这个值