精华内容
下载资源
问答
  • Vue2.0和Vue3.0的区别

    千次阅读 2020-11-05 14:02:32
    1.项目目录结构 vue-cli2.03.0在目录结构方面,有明显不同 vue-cli3.0移除了配置文件目录,configbuild文件夹 同时移除了static静态文件夹,新增了public文件夹,打开层级目录还会发现,index.html移动到...

     1.项目目录结构   vue-cli2.0与3.0在目录结构方面,有明显的不同
    vue-cli3.0移除了配置文件目录,config和build文件夹
    同时移除了static静态文件夹,新增了public文件夹,打开层级目录还会发现,index.html移动到public中
    2.配置项   3.0 config文件已经被移除,但是多了.env.production和env.development文件,除了文件位置,实际配置起来和2.0没什么不同
    没了config文件,跨域需要配置域名时,从config/index.js 挪到了vue.config.js中,配置方法不变
    3.渲染   Vue2.x使用的Virtual Dom实现的渲染
    Vue3.0不论是原生的html标签还是vue组件,他们都会通过h函数来判断,如果是原生html标签,在运行时直接通过Virtual Dom来直接渲染,同样如果是组件会直接生成组件代码    4.数据监听   Vue2.x大家都知道使用的是es5的object.defineproperties中getter和setter实现的,而vue3.0的版本,是基于Proxy进行监听的,其实基于proxy监听就是所谓的lazy by default,什么意思呢,就是只要你用到了才会监听,可以理解为‘按需监听’,官方给出的诠释是:速度加倍,同时内存占用还减半。
    4.按需引入   Vue2.x中new出的实例对象,所有的东西都在这个vue对象上,这样其实无论你用到还是没用到,都会跑一变。而vue3.0中可以用ES module imports按需引入,如:keep-alive内置组件、v-model指令,等等。

    展开全文
  • vue2.0和vue3.0的区别

    2021-03-26 16:26:18
    Vue2.0 Vue3.0 安装 npm install -g vue-cli npm install -g @vue/cli 项目创建 vue init webpack 项目名 vue create 项目名(项目名需小写) 运行 npm run dev npm run serve 配置 webpack.config.js...
    # Vue2.0 Vue3.0
    安装 npm install -g vue-cli npm install -g @vue/cli
    项目创建 vue init webpack 项目名 vue create 项目名(项目名需小写)
    运行 npm run dev npm run serve
    配置 webpack.config.js(自动添加) vue.config.js(手动添加)
    路由模式配置 const router = new VueRouter({mode:“history”, routes:[…]})

    Vue2.0的路由模式配置

    	const router = new VueRouter({
    	mode:"history",   //默认hash模式
    	routes:[...]
    })
    

    Vue3.0下vue-router4.0的路由模式配置

    import { createRouter, createWebHistory } from 'vue-router'
    const router = createRouter({
      // history: createWebHashHistory(),    hash模式
      history: createWebHistory(process.env.BASE_URL), // history模式
      routes
    })
    

    Vue2.0插件的引入和使用方式
    在这里插入图片描述

    Vue3.0插件的引入和使用方式
    在这里插入图片描述
    Vue2.0 所有错误页面路由匹配页面

    import Error from './views/Error.vue'
    {
        path: '*',
        name: 'error',
        component: Error
     },
    

    Vue3.0 所有错误页面路由匹配页面

     {
        // vue3.0 所有错误页面路由匹配页面
        path: '/:pathMatch(.*)*',
        name: '404',
        component: () => import('../components/ErrorPage.vue')
        // children:[
        //   //错误路由重定向到商品页
        //   {path: "/:pathMatch(.*)*",redirect:'/togglecontent'}
        // ]
      }
    

    在这里插入图片描述
    在这里插入图片描述

    未完待续。。。。

    展开全文
  • VUE2.0和VUE3.0的区别

    2021-01-07 19:42:25
    vue-cli2.03.0在目录结构方面,有明显不同 vue-cli3.0移除了配置文件目录,config build 文件夹 同时移除了 static 静态文件夹,新增了 public 文件夹,打开层级目录还会发现, index.html 移动到 public 中 ...

    1.默认目录结构的变化

    vue-cli2.0与3.0在目录结构方面,有明显的不同
    vue-cli3.0移除了配置文件目录,config 和 build 文件夹
    同时移除了 static 静态文件夹,新增了 public 文件夹,打开层级目录还会发现, index.html 移动到 public 中

    2.配置项

    3.0 config文件已经被移除,但是多了.env.production和env.development文件,除了文件位置,实际配置起来和2.0没什么不同
    没了config文件,跨域需要配置域名时,从config/index.js 挪到了vue.config.js中,配置方法不变

    3.渲染

    Vue2.x使用的Virtual Dom实现的渲染

    Vue3.0不论是原生的html标签还是vue组件,他们都会通过h函数来判断,如果是原生html标签,在运行时直接通过Virtual Dom来直接渲染,同样如果是组件会直接生成组件代码

    4.数据监听

    Vue2.x大家都知道使用的是es5的object.defineproperties中getter和setter实现的,而vue3.0的版本,是基于Proxy进行监听的,其实基于proxy监听就是所谓的lazy by default,什么意思呢,就是只要你用到了才会监听,可以理解为‘按需监听’,官方给出的诠释是:速度加倍,同时内存占用还减半。

    5.按需引入

    Vue2.x中new出的实例对象,所有的东西都在这个vue对象上,这样其实无论你用到还是没用到,都会跑一变。而vue3.0中可以用ES module imports按需引入,如:keep-alive内置组件、v-model指令,等等。

    6. vue2和vue3双向数据绑定原理发生了改变

    vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。

    vue3 中使用了 es6 的 ProxyAPI 对数据代理。

    相比于vue2.x,使用proxy的优势如下
    1.defineProperty只能监听某个属性,不能对全对象监听
    可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可)
    2.可以监听数组,不用再去单独的对数组做特异性操作 vue3.x可 3.以检测到数组内部数据的变化

    7.默认进行懒观察(lazy observation)

    在 2.x 版本里,不管数据多大,都会在一开始就为其创建观察者。当数据很大时,这可能会在页面载入时造成明显的性能压力。3.x 版本,只会对「被用于渲染初始可见部分的数据」创建观察者,而且 3.x 的观察者更高效。

    8.更精准的变更通知

    比例来说:2.x 版本中,使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行;3.x 版本中,只有依赖那个属性的 watcher 才会重新运行。

    9. vue3.0 新加入了 TypeScript 以及 PWA 的支持

    10. vue3.0的生命周期也发生了变化

    直接上图
    在这里插入图片描述

    后续还有很多,持续更新…

    展开全文
  • Vue2.0使用Object.defineProperty 原理:通过使用 Object.defineProperty 来劫持对象属性 geter seter 操作,当数据发生改变发出通知 代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <...

    1.数据的双向绑定

    Vue2.0使用Object.defineProperty

    原理:通过使用 Object.defineProperty 来劫持对象属性的 geter 和 seter 操作,当数据发生改变发出通知

    代码:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="yingaxiang" content="width=device-width, initial-scale=1.0">
     6     <title>vue2.x数据双向绑定</title>
     7 </head>
     8 <body>
     9     <div>
    10         <input type="text" id="input">
    11         <span id="text"></span>
    12     </div>
    13 </body>
    14 </html>
    15 <script>
    16     var obj = {};
    17     Object.defineProperty(obj, 'prop', {
    18         get: function () {
    19             return val;
    20         },
    21         set: function (newVal) {
    22             val = newVal;
    23             document.getElementById('text').innerHTML = val;
    24         }
    25     });
    26     document.addEventListener('keyup', function (e) {
    27         obj.prop = e.target.value;
    28     });
    29 </script>
    

    Vue 3.0使用ES6的新特性porxy

    原理:通过ES6的新特性proxy来劫持数据,当数据改变时发出通知

    代码:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="yingaxiang" content="width=device-width, initial-scale=1.0">
     6     <title>vue3.0数据双向绑定</title>
     7 </head>
     8 <body>
     9     <div>
    10         <input type="text" id="input">
    11         <span id="text"></span>
    12     </div>
    13 </body>
    14 </html>
    15 <script>
    16     var obj = {};
    17     var obj1 = new Proxy(obj, {
    18         // target就是第一个参数obj, receive就是返回的obj(返回的proxy对象)
    19         get: function (target, key, receive) {
    20             // 返回该属性值
    21             return target[key];
    22         },
    23         set: function (target, key, newVal, receive) {
    24             // 执行赋值操作
    25             target[key] = newVal;
    26             document.getElementById('text').innerHTML = target[key];
    27         }
    28     })
    29     document.addEventListener('keyup', function (e) {
    30         obj1[0] = e.target.value;
    31     });
    32 </script>
    

    总结:

    Vue2.x版本中的双向绑定不能检测到下标的变化
    proxy可以劫持整个对象,并返回一个新对象

    2. vue3.0 diff 方法优化

    • vue2 中的虚拟dom是进行全量的对比
    • vue3 中新增了静态标记(pathFlag)

      在创建dom的时候diff算法的更新 会根据Dom中的内容会不会发生变化,添加动态的标记

    展开全文
  • 还有usb3.0接口的,但是usb3.0u盘价格相对较高,使用的用户也相对较少,所以可能很多用户并不了解usb3.0与usb2.0的区别,下面u启动就为大家普及一下usb2.0与usb3.0区别,这样您要是使用u盘就知道怎么区别usb2.0和3.0...
  • 创建VUE项目,2.0版本3.0版本的区别使用vue2.0版本创建vue项目创建前的准备开始创建创建过程项目正常创建使用vue3.0版本创建vue项目 使用vue2.0版本创建vue项目 你好! 这是你第一次使用 Markdown编辑器 所展示的...
  • 前几天有粉丝问我USB2.0和USB3.0有哪些区别和优点,下面做下介绍。USB 2.0:2000年发布USB接口标准,理论上,usb2.0传输速率为480Mbps,即60MB/s,最大输出电流0.5A。usb2.0一般是白色或者黑色接口,usb2.0接口...
  • 市面上的u盘有多种多样,不过现在使用usb2.0接口的u盘居多,还有usb3.0接口的,但是usb3.0u盘价格相对较高,使用的用户也相对较少,所以可能...usb2.0和3.0的区别 1、从外观看,usb2.0一般是白色或者黑色接口,usb...
  • 都好在哪里,为什么大家都建议买usb3.0,看完下面三要素你就明白 usb3.0和2.0的区别 了。 1、数据传输 usb3.0 引入全双工数据传输。5根线路中2根用来发送数据,另2根用来接收数据,还有1根是地线。也就是说,usb ...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 168
精华内容 67
关键字:

vue2.0和vue3.0的区别

vue 订阅