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
