进来看看,这些知识要知道,vue3.0的语法与vue2.x有什么不同

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

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值