vue3.0与vue2.x不同，你可以知道

小编最近在用vue3.0去写项目，也总结了一些关于vue2.x和vue3.0的一些区别

vue3.0对vue的主要3个特点：响应式、模板、对象式的组件声明方式，进行了全面的更改，底层的实现和上层的api都有了明显的变化，基于Proxy重新实现了响应式，基于treeshaking内置了更多功能，提供了类式的组件声明方式。

在vue2.x如何去使用vue3.0的语法

安装依赖Composition API

npm install @vue/composition-api --save

在main.js使用

import VueCompositionApi from '@vue/composition-api'; 
Vue.use(VueCompositionApi);

VUE3.0新特性语法

setup函数

setup函数是一个新的Vue组件选项，是用于在组件中使用Composition API的入口。

export default {

  setup(props, context) {

​    context.attrs

​    context.slots

   context.parent

   context.root

   context.emit

   context.refs
  }
}

Reactive（声明单一对象时使用）

取得一个对象并返回原始对象的响应数据处理。

const obj = reactive({ count: 1 })

ref（声明基础数据类型变量时使用）

内部值并返回一个响应性且可变的ref对象。ref对象具有.value指向内部值的单个属性。

const number = ref(0);

获取值方式：number.value

isRef 和 toRefs

检查一个对象是否是ref对象：

const unwrapped = isRef(foo) ? foo.value : foo;

function useMousePosition() {

  const pos = reactive({

​    x: 0,

​    y: 0

  });

  return toRefs(pos);

}

const { x, y } = useMousePosition();

toRefs将reactive对象转换为普通对象，保证对象解构或拓展运算符不会丢失原有响应式对象的响应.

watch 侦听器

const count = ref(100);

watch(()=>count.vlaue,()=>{

  console.log('count数值发生变化了')

})

count.value = 200; // count重新赋值，watch则被执行

mputed

可传入get和set，用于定义可更改的计算属性

const count = ref(1);

const plusOne = computed({

  get: () => count.value + 1,

  set: val => { count.value = val - 1 }

});


 plusOne.value = 1;

console.log(count.value); // 0

2.x生命周期选项和Composition API之间的映射

beforeCreate ->使用 setup()
created ->使用 setup()
beforeMount - > onBeforeMount
mounted - > onMounted
methods -> 去除，普通方式写方法
beforeUpdate - > onBeforeUpdate
updated - > onUpdated
beforeDestroy - > onBeforeUnmount
destroyed - > onUnmounted
errorCaptured - > onErrorCaptured