vue.js3.0与2.0到底有什么不一样的地方?

2020年07月18日 前端开发 65点热度 1人点赞 0条评论

长沙网站建设关注到在很久之前vue.js官方就发布了最新的3.0 API 修改草案,那么vue3.0与2.0到底有什么不一样的地方?这篇vue.js教程就简单来说说vue.js3.0与2.0的一些区别。

vue3.0的特点

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

Vue 3.0 最新进展

Vue 官方发布了最新的3.0 API 修改草案,并在充分采纳社区的意见后,将Vue Function API 更正为 Vue Composition API,也提供了 Vue3.0 特性的尝鲜版本,提供了在Vue 2.x 能够提前体验此API的库 @vue/composition-api

意思就是说:VUE2.0也可以用Composition API Composition

API详解:https://vue-composition-api-rfc.netlify.com/

目前长沙网站建设的小编也是在用这个官方的@vue/composition-api库进行开发。

怎么使用Composition API来使用vue3.0

Composition API 的使用比较简单,我们只需要先安装依赖: npm install @vue/composition-api --save 然后在项目主入口文件(一般是main.js)导入composition-api并使用就可以了,如下:

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: 0 })

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则被执行

Computed:可传入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

$refs 实例属性

<template>
<div>
    <hello-world ref="helloWold"></hello-world>
    <button ref="btn"></button>
</div>
</template>
import {ref} from "@vue/composition-api"
export default {
    setup() {
        const helloWorld = ref(null);//helloworld组件实例
        const btn = ref(null);//button dom节点对象
        return {
            btn,
            helloWorld
        }
    }
}

Props: 外部属性(一般在组件用的多)

export default {
    props:{
        name:String
    },
    setup(props) {
        console.log(props.name)
    }
}

生命周期钩子

import { onMounted, onUpdated, onUnmounted } from 'vue'
const MyComponent = {
  setup() {
    onMounted(() => {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
  }
}

@vue/composition-api 删除了onBeforeCreateonCreated 。因为 setup 总是在创建组件实例时调用,即 onBeforeCreate 之后和 onCreated 之前调用,因此 onBeforeCreateonCreated 将可以使用 setup 进行代替。

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

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

除了2.x生命周期等效项之外,Composition API还提供了以下调试挂钩:

onRenderTrackedonRenderTriggered 两个钩子都收到 DebuggerEvent 类似于 onTrackonTrigge

以上就是今天长沙网站建设给大家分享的vue.js教程了,相信大家看了文章之后对vue.js3.0与2.0到底有什么不一样的地方这个问题都有了一定的了解,如果教程中有错误或者信息延后的话也欢迎大家指出来,我们一起学习一起进步。长沙网站建设认为只有良好的技术作为基础,才能更好的做好网站建站的工作,更好的为大家服务。

标签:

建站我帮您

保持饥渴的专注,追求最佳的品质

文章评论