2021-02-22

vue3.0 和vue2.0 语法的区别

官网

安装项目

查看当前vue的版本: vue --version 或者 vue -V (小v会报错) 
如果 版本过低使用 npm uninstall vue-cli -g 全局卸载脚手架
在安装 npm intall @vue/cli -g   
vue create demo(项目名称) 安装项目
或者 npm install @vue/cli@next (安装vue3.0) 可能有问题

语法的区别

setup 处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数

import {toRefs, ref, reactive } from 'vue'
 setup() {
    const count = ref(0) 
    console.log(count.value)
    const state =  reactive({
        age: 18
    })
    retrun { count, ...toRefs(state) }
 }
 ref 重要用于 基本数据类型的响应式 
 reactive 用于应用数据类型的响应
 toRefs 将响应式对象转换为普通对象
    

data

vue2: 
    data() { return {} }
vue3:
    import { reactive } from 'vue
    setup(props, context) {
        const state = reactive({
            age: 18
        })
        return { state }
    }

methods

vue2: methods:{}
vue3: 写在setup函数里面也可写在state中，并返回
    import { reactive, toRefs } from 'vue';
    setup() {
        const state = reactive({
          age: 19,
          add1: () => {
            state.age++
          }
        }) 
        function add() {
          state.age++
        }
        return { ...toRefs(state), add }
    }
    

computed

vue2: 
    cpmputed:{}
vue3:
    import { computed, ref, reactive } from 'vue';
    方法一： 写在state里面
    setup() {
        const count = ref(1)
        const state = reactive({
          age: 19,
          age1: computed(() => state.age + 1),
          count2: computed({
            get: () => {
              return count.value + 1
            },
            set: (val) => {
              return count.value = val - 1
            }
          })
        })
        return { count, ...toRefs(state) }
    }
    方法二： 写在state里面
    setup() {
        const count = ref(1) 
        const count1 = computed({
          get: () => {
            return count.value + 1
          },
          set: (val) => {
            return count.value = val - 1
          }
        })
        return { count1 }
    }

watch

vue2: watch:{}
vue3: 
    setup() {
        const state = reactive({
          age: 19,
        }) 
        const count = ref(1)
        // 监听数值
        watch(count, (n, o)=> {
          console.log(n, o)
        })
        // 监听对象的
        watch(() => state.age, (n, o)=> {
          console.log(n, o)
        })
    }

生命周期

vue2: created、 mounted、 updated、destory
vue3： 
    import { onMounted, onUpdated, onUnmounted } from 'vue'
    setup() {
        onMounted(() => {
          console.log('mounted!')
        })
        onUpdated(() => {
          console.log('updated!')
        })
        onUnmounted(() => {
          console.log('unmounted!')
        })
     }

父子传参

vue2： 父传子：props 子传父：this.$emit
vue3: 
    父传子:
    <HelloWorld :name="'父传子'"></HelloWorld>
    props: {
        name: {
          type: String
    }
    setup(props, context) {
        console.log(props.name)
      }
    }
    子传父:
    setup(props, context) {
        context.emit('talk', '子传父')
    }
    <HelloWorld @talk="change"></HelloWorld>
    const change = (val) => {
        console.log(val.value)
    }

获取dom元素

<div ref= "box"> </div>
vue2: this.$refs.box
vue3: 
setup() {
    const box = ref(null)
    onMounted(()=>{
      console.dir(box)
    })
    retrun { box }
}

provide inject

• provide() 和 inject() 可以实现嵌套组件之间的数据传递
• vue3这两个函数只能在 setup() 函数中使用。
• 父级组件中使用 provide() 函数向下传递数据。
• 子级组件中使用 inject() 获取上层传递过来的数据。
• 不限层级

vue2: 
    provide() {
        return {
          data: 'provide'
        }
    },
    后代组件
    <div>{{data}}</div>
    inject: ['data'],
vue3: 
    import { provide } from 'vue' 
    setup() {
        provide('data', 'provide')
    }
    后代组件
    <div>{{data}}</div>
    import { inject } from 'vue'
    setup(props, context) {
        const data = inject("data")
        return { data }
    }