您好,欢迎来到12图资源库!分享精神,快乐你我!我们只是素材的搬运工!!
  • 首 页
  • 当前位置:首页 > 开发 > WEB开发 >
    Vue2.x与Vue3.x语法比照浅析
    时间:2020-10-20 21:12 来源:网络整理 作者:网络 浏览:收藏 挑错 推荐 打印

    Vue3.0推出已有一段时间了,各位小同伴们都有放置上学习没,想要技术进阶的同窗赶忙学习起来吧。

    Vue2.x与Vue3.x语法比照浅析

    假设你对vue3不是特别了解,或许计划去学习,可以看看下面的分享,希望对大家有所协助!

    创立项目

    首先更新vue-cli到最新版本。

    npm install -g @vue/cli # OR yarn global add @vue/cli 

    vue create hello-vue3 

    select vue 3 preset 

    项目变化

    vue2.x和vue3.x目录结构没有什么变化,只是一些运用办法变了,而且默许是安装了TypeScript。

    Vue2.x与Vue3.x语法比照浅析

    main.js

    vue2.x运用import Vue from 'vue',然后运用new Vue()创立实例。vue3.x则是import {createApp} from 'vue',经过createApp()来创立实例了。

    这就招致了很多的插件或UI组件库不能运用,比如ElementUI、iView...

    router.js创立路由

    vue3.x需求引入createRouter创立地址路由。createWebHashHistory对应之前的hash,createWebHistory对应之前的history。

    vuex形状管理

    vue3.x中形状管理的创立方式变为了createStore 。代码结构更精简合理。

    Composition API

    这个是vue3.x变化最大的中央,vue2.x数据寄存在data,办法在methods,经过this去调用。但是在vue3.x这些都没有了,一切的代码全部都在 setup 外面完成,你页面需求哪些办法,就要在以后页引入即可。

    Vue2.x与Vue3.x语法比照浅析

    生命周期

    vue3.x的生命周期也发作了一些变化,大家可以看下面这张图。

    在项目中详细的运用办法。

    Vue2.x与Vue3.x语法比照浅析

    运用引见

    setup

    setup有两个参数 props 和 context

    props:接受父组件传的值

    context:vue3.x外面没有this,提供了一个context上下文属性,你可以经过这个属性去获取停止 一些 vue2.x 用this完成的操作

    ref 声明基础数据类型

    创立一个照应式的基础类型,只能监听number、String、boolean等复杂的类型,该属性一旦发作更改,都会被检测到。

    <template> 

       <div>{{count}}</div>             // 1 

    </template> 

    import {ref} from "vue" 

     

    setup(){ 

       const count =ref(0) 

       count.value++    //必需要加.value 

       return

           count        //一定要return 出去 

       } 

    reactive 声明照应式数据对象

    <template> 

       <div>{{count.name}}</div>             // 857 

    </template> 

    import {reactive} from "vue" 

     

    setup(){ 

       const count =reactive({ 

          name:'369' 

       }) 

       count.name='857' 

       return

          count  

       } 

    computed 计算属性

    (责任编辑:admin)