精华内容
下载资源
问答
  • Vue数据双向绑定原理(vue2向vue3的过渡)

    万次阅读 多人点赞 2019-11-13 15:13:40
    vue2中的双向绑定是基于defineProperty的get操作与set操作,那么我们简单认识下defineProperty, 作用: 就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性。 那么我们先来看下Object.getOwnPrope...

    众所周知,Vue的两大重要概念:

    1. 数据驱动
    2. 组件系统

    接下来我们浅析数据双向绑定的原理

    一、vue2

    1、认识defineProperty

    vue2中的双向绑定是基于definePropertyget操作set操作,那么我们简单认识下defineProperty
    作用: 就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性。
    那么我们先来看下Object.getOwnPropertyDescriptor(),有定义方法就会有获取方法,对这就是与defineProperty相对的方法,它可以获取属性值。

    var a ={
        b:1,
        c:2
    }
    console.log(Object.getOwnPropertyDescriptor(a,'b')); //查看获取b属性
    

    在这里插入图片描述
    这就是打印出来的结果,configurable的意思是可便利,enumerable的意思是可枚举,writable的意思是可写。

    2、使用defineProperty实现简单的私有变量

    知道了属性内部的属性值,我们可以使用defineProperty来实现一个私有变量。

    var a ={
        b:1,
        c:2
    }
    Object.defineProperty(a,'b',{
        writable:false  //不可写
    })
    console.log(Object.getOwnPropertyDescriptor(a,'b')); //查看获取b属性
    

    在这里插入图片描述
    发现,改变不了a.b的值。


    另外,还可以使用一个很快捷的方法实现私有变量

    var a ={
        b:1,
        c:2
    }
    Object.freeze(a,'b'); //冻结,可理解为变为私有属性
    // Object.seal(a,'b'); //configurable置为false 
    console.log(Object.getOwnPropertyDescriptor(a,'b')); //查看获取b属性
    

    在这里插入图片描述
    同样,writable为false。如果使用seal()只能使configurable为false。

    3、简单认识defineProperty的get、set的方法

    我们先不要创建全局变量,跟get方法return值,你会发现值为undefined
    在这里插入图片描述
    于是我们改了改

    var a ={
        b:1,
        c:2
    }
     var _value=a.b; //b值赋值需要先赋给全局变量,不然使用不了
     Object.defineProperty(a,'b',{
        get:function(){
            console.log('get');
            return _value; // get方法必须ruturn值,值为全局变量。
        },
        set:function(newValue){
            console.log(newValue)
            _value=newValue; // 赋值
        }
     })
    

    在这里插入图片描述
    取到了。

    4、使用defineProperty简单实现Vue双向绑定

    test.js

    // 使用defineProperty
    function vue () {
        this.$data={
            a:1 // 数组的话不会更新
        };
        this.el=document.getElementById('app');
        this._html="";
        this.observe(this.$data);
        this.render();
    };
    vue.prototype.observe=function(obj){
        var value;
        var self=this;
        for(var key in obj){
            value =obj[key];
            if(typeof value === 'object'){
                this.observe(value)
            }else{
                Object.defineProperty(this.$data,key,{
                    get:function(){
                        return value;
                    },
                    set:function(newvalue){
                        value=newvalue;
                        self.render();
                    }
                })
            }
        }
    }
    vue.prototype.render=function(){
        this._html='I am '+ this.$data.a;
        this.el.innerHTML=this._html;
    }
    
    
    // ***************************************
    //数组改变更新,装饰者模式
    // var arraypro=Array.prototype;
    // var arrayob=Object.create(arraypro);
    // var arr = ["push","pop","shift"];
    // // arr里的方法,既能保持原有的方法,又能触发更新。
    // arr.forEach(function(method,index){
    //     arrayob[method]=function(){
    //         var ret=arraypro[method].apply(this,arguments);
    //         console.log('更新');
    //         return ret;
    //     }
    // })
    // var arr=[];
    // arr.__proto__=arrayob;
    // arr.push(1);
    

    test.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>vue双向绑定原理</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
    <script src="test.js"></script>
    <script>
        var vm = new vue();
        setTimeout(function(){
            console.log('changes');
            console.log(vm.$data);
            vm.$data.a=222;
        },2000)
    </script>
    </html>
    

    这样我们就简单实现了数据双向绑定。

    二、vue3

    1、简单认识Proxy

    就是一种机制,用来拦截外界对目标对象的访问,可以对这些访问进行过滤或者改写,所以Proxy更像是目标对象的代理器。

    var ob= {
        a:1,
        b:2
    }
    // 新创建一个Proxy对象直接替换ob对象
    ob=new Proxy(ob,{
        get:function(target,key,receive){   // target指的是原始对象,key指的是属性值,receive指的是这个Proxy对象
            console.log(target,key,receive) 
            return target[key]; //get方法 依然需要return
        },
        set:function(target,key,newvalue,receive){
            console.log(target,key,newvalue,receive) // newvalue指新创建的值
            target[key]=newvalue;
        }
    });
    

    这里需要注意的是:第一次使用proxy时,在new的时候把原对象替换掉。就会触发get方法

    看到上方的代码,我们可以总结Proxy的几个优点:

    1. defineProperty只能监听某个属性,不能对全对象监听;
    2. 所以可以省去for in 提升效率;
    3. 可以监听数组,不用再去单独的对数组做异性操作。

    2、使用Proxy简单实现数据双向绑定

    test1.js

    // 使用Proxy
    function vue () {
        this.$data={
            a:1 
        };
        this.el=document.getElementById('app');
        this._html="";
        this.observe(this.$data);
        this.render();
    };
    vue.prototype.observe=function(obj){
        var self=this;
        this.$data=new Proxy(this.$data,{
            get:function(target,key){
                return target[key];
            },
            set:function(target,key,newvalue){
                target[key]=newvalue;
                self.render();
            }
        })
    }
    vue.prototype.render=function(){
        this._html='I am '+ this.$data.a;
        this.el.innerHTML=this._html;
    }
    
    

    test.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>vue双向绑定原理</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
    <script src="test1.js"></script>
    <script>
        var vm = new vue();
        setTimeout(function(){
            console.log('changes');
            console.log(vm.$data);
            vm.$data.a=222;
        },2000)
    </script>
    </html>
    

    3、Proxy还可以做什么呢?

    (1)、校验类型

    function createValidator(target,validator){
        return new Proxy(target,{
            _validator:validator,
            set:function(target,key,value,proxy){
                if (target.hasOwnProperty(key)) {
                    var validator1=this._validator[key];
                    if(validator1(value)){
                        return Reflect.set(target,key,value,proxy)
                    }
                    else{
                        throw Error('type error')
                    }
                }
            }
        })
    }
    var personvalidator={
        name(val){
            return typeof val==='string'
        },
        age(val){
            return typeof val==='number'&&val>18
        }
    }
    
    class Person {
        constructor(name,age) {
            this.name=name;
            this.age=age;
            return createValidator(this,personvalidator);
        }
    }
    var tss=new Person('maomin',22);
    

    (2)、真正私有变量

    var api = {
        _secret: 'xxxx',
        _otherSec: 'bbb',
        ver: 'v0.0.1'
    };
    
    api = new Proxy(api, {
        get: function (target, key) {
            // 以 _ 下划线开头的都认为是 私有的
            if (key.startsWith('_')) {
                console.log('私有变量不能被访问');
                return false;
            }
            return target[key];
        },
        set: function (target, key, value) {
            if (key.startsWith('_')) {
                console.log('私有变量不能被修改');
                return false;
            }
            target[key] = value;
        },
        has: function (target, key) {
            return key.startsWith('_') ? false : (key in target);
        }
    });
    
    api._secret; // 私有变量不能被访问
    console.log(api.ver); // v0.0.1
    api._otherSec = 3; // 私有变量不能被修改
    console.log('_secret' in api); //false
    console.log('ver' in api); //true
    
    展开全文
  • vue2与vue3的区别

    千次阅读 2020-09-25 17:13:28
    Vue2和Vue3开发组件有什么区别 vue2和vue3双向数据绑定的区别 总结: 1. vue2和vue3双向数据绑定原理发生了改变 vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式...

    参考文档:

    Vue2和Vue3开发组件有什么区别

    vue2和vue3双向数据绑定的区别

    总结:

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

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

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

    相比于vue2.x,使用proxy的优势如下

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

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

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

    3. 更精准的变更通知。

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

    4. 3.0 新加入了 TypeScript 以及 PWA 的支持

    5.vue2和vue3组件发送改变

    具体参考Vue2和Vue3开发组件有什么区别

    展开全文
  • Vue 3教程(适用于Vue 2用户)

    万次阅读 多人点赞 2020-06-01 14:44:40
    Vue 3尚未正式发布,但是维护者已经发布了Beta版本,供我们的参与者尝试并提供反馈。 如果你想知道Vue 3的主要功能和主要变化是什么,那么我将在这篇文章中重点介绍一下,告诉你使用Vue 3 beta 9创建一个简单的应用...

    微信搜索【前端全栈开发者】关注这个脱发、摆摊、卖货、持续学习的程序员的公众号,第一时间阅读最新文章,会优先两天发表新文章。关注即可大礼包,送某网精品视频课程网盘资料,准能为你节省不少钱!

    Vue 3尚未正式发布,但是维护者已经发布了Beta版本,供我们的参与者尝试并提供反馈。

    如果你想知道Vue 3的主要功能和主要变化是什么,那么我将在这篇文章中重点介绍一下,告诉你使用Vue 3 beta 9创建一个简单的应用程序。

    我将介绍尽可能多的新内容,包括fragments,teleport,Composition API以及其他一些晦涩的更改。我将尽力解释该功能或更改的原理。

    目录


    我们将建立什么

    我们将构建一个带有模式窗口功能的简单应用。我之所以选择它,是因为它可以方便地展示Vue 3的许多变化。

    这是该应用在打开和关闭状态下的外观,因此你可以在脑海中描绘出我们正在做什么:

    Vue 3安装和setup

    与其直接安装Vue 3,不如克隆一个项目 vue-next-webpack-preview,这将为我们提供一个包括Vue 3在内的最小的Webpack设置。

    $ git clone https://github.com/vuejs/vue-next-webpack-preview.git vue3-experiment
    $ cd vue3-experiment
    $ npm i
    

    一旦克隆好了,安装好了NPM模块,我们需要做的就是删除样板文件,然后创建一个新的 main.js 文件,这样我们就可以从头开始创建我们的Vue 3 app了。

    $ rm -rf src/*
    $ touch src/main.js
    

    现在,我们将运行开发服务器:

    $ npm run dev
    

    创建一个新的Vue 3 app

    我们启动一个新的Vue应用程序的方式改变了,我们现在需要导入新的 createApp 方法,而不是使用新的 Vue()

    我们调用这个方法,传递我们的Vue实例定义对象,并将返回对象分配给一个变量 app

    接下来,我们将在 app 上调用 mount 方法,并传递一个CSS选择器来指示我们的mount元素,就像在Vue 2中使用 $mount 实例方法一样。

    // src/main.js
    
    import { createApp } from "vue";
    
    const app = createApp({
      // 根实例定义
    });
    
    app.mount("#app");
    

    变化的原因

    与旧的API一样,我们添加的任何全局配置(plugins,mixins,原型属性等)都将永久更改全局状态。例如:

    // src/main.js
    
    // 影响两个实例
    Vue.mixin({ ... })
    
    const app1 = new Vue({ el: '#app-1' })
    const app2 = new Vue({ el: '#app-2' })
    

    在单元测试中,这确实是一个问题,因为要确保将每个测试都与上一个测试隔离是很棘手的。

    在新的API下,调用 createApp 将返回一个新的app实例,该实例不会被应用于其他实例的任何全局配置污染。

    了解更多:Global API change RFC

    添加state属性

    我们的模态窗口可以处于两种状态之一——打开或关闭。让我们用一个布尔状态属性 modalOpen 来管理它,我们将给它一个初始值 false

    在Vue 2下,我们可以通过在我们的应用实例上创建一个 data 属性并将一个对象分配给该对象来声明 modalOpen 属性,例如:

    // src/main.js
    
    const app = createApp({
      data: {
        modalOpen: false
      }
    });
    

    不再允许这样做。相反,必须为数据分配一个返回状态对象的工厂函数。

    // src/main.js
    
    const app = createApp({
      data: () => ({
        modalOpen: false
      })
    });
    

    变化的原因

    使用对象而不是工厂函数来存储数据的优点是,首先,它在语法上更简单;其次,你可以在多个根实例之间共享顶级状态,例如:

    // src/main.js
    
    const state = {
      sharedVal: 0
    };
    
    const app1 = new Vue({ state });
    const app2 = new Vue({ state });
    
    // 影响两个实例
    app1._data.sharedVal = 1;
    

    这种用例很少,可以使用。因为有两种类型的声明是不适合初学者的,所以决定删除这个特性。

    了解更多:Data object declaration removed RFC

    在继续之前,我们还添加一个方法来切换 modalOpen 值。这与Vue 2没什么不同。

    // src/main.js
    
    const app = createApp({
      data: () => ({
        modalOpen: true  
      }),
      methods: {
        toggleModalState() {
          this.modalOpen = !this.modalOpen;
        }
      }
    });
    

    使用一个根组件

    如果你现在进入浏览器并检查控制台,则会看到警告“Component is missing render function”,因为我们尚未为根实例定义模板。

    Vue 2的最佳实践是为根实例创建一个最小的模板,并创建一个app组件,其中将声明主app标记。

    让我们在这里也这样做。

    $ touch src/App.vue
    

    现在我们可以获取根实例来渲染该组件。区别在于,对于Vue 2,我们通常会使用render函数来执行此操作:

    // src/main.js
    
    import App from "./App.vue";
    
    const app = createApp({
      ...
      render: h => h(App)
    });
    
    app.mount("#app");
    

    我们仍然可以做到这一点,但是Vue 3有一个更简单的方法——使 App 成为根组件。为此,我们可以删除根实例定义,而是传递 App 组件。

    // src/main.js
    
    import App from "./App.vue";
    
    const app = createApp(App);
    
    app.mount("#app");
    

    这意味着 App 组件不仅由根实例渲染,而且是根实例。

    在此过程中,我们通过删除 app 变量来简化语法:

    // src/main.js
    
    createApp(App).mount("#app");
    

    现在移至根组件,让我们向该组件重新添加状态和方法:

    // src/App.vue
    
    <script>
    export default {
      data: () => ({
        modalOpen: true  
      }),
      methods: {
        toggleModalState() {
          this.modalOpen = !this.modalOpen;
        }
      }
    };
    </script>
    

    我们还为模态功能创建一个新组件:

    $ touch src/Modal.vue
    

    现在,我们将提供一个最小的模板,其中包括内容插槽。这确保了我们的模态是可重用的。稍后我们将向此组件添加更多内容。

    // src/Modal.vue
    
    <template>
      <div class="modal">
        <slot></slot>
      </div>
    </template>
    

    多根模板

    现在让我们为我们的根组件创建模板。我们将创建一个按钮来打开模态,它将触发 toggleModalState 方法。

    我们还将使用我们刚刚创建的modal组件,它将根据 modalState 的值来渲染。让我们也在槽中插入一段文字作为内容。

    // src/App.vue
    
    <template>
      <button @click="toggleModalState">Open modal</button>
      <modal v-if="modalOpen">
        <p>Hello, I'm a modal window.</p>
      </modal>
    </template>
    <script>
    import Modal from "./Modal.vue";
    export default {
      components: {
        Modal
      },
      ...
    }
    </script>
    

    注意这个模板有什么奇怪的地方吗?再看一遍。

    没错——有两个根元素。在Vue 3中,由于有了一个叫做片段(fragments)的功能,它不再强制要求有一个单一的根元素!

    使用Composition API进行重构

    Vue 3的旗舰功能是Composition API。这个新的API允许你使用 setup 功能而不是使用添加到组件定义对象的属性来定义组件功能。

    现在,让我们重构App组件以使用Composition API。

    在解释代码之前,请清楚我们所做的只是重构——组件的功能将相同。还要注意,模板没有更改,因为Composition API仅影响我们定义组件功能的方式,而不影响我们渲染它的方式。

    src/App.vue

    <template>
      <button @click="toggleModalState">Open modal</button>
      <modal v-if="modalOpen">
        <p>Hello, I'm a modal window.</p>
      </modal>
    </template>
    <script>
    import Modal from "./Modal.vue";
    import { ref } from "vue";
    export default {
      setup () {
        const modalState = ref(false);
        const toggleModalState = () => {
          modalState.value = !modalState.value;
        };
        return {
          modalState,
          toggleModalState
        }
      }
    };
    </script>
    

    setup 方法

    首先,请注意,我们导入了 ref 函数,该函数允许我们定义响应式变量 modalState。此变量等效于this.modalState

    toggleModalState 方法只是一个普通的JavaScript函数。但是,请注意,要更改方法主体中的 modalState 值,我们需要更改其子属性 value。 这是因为使用 ref 创建的响应式变量被封装在一个对象中。这对于保留它们的响应式是非常必要的,因为它们在被传递的过程中会被保留下来。

    最后,我们从 setup 方法返回 modalStatetoggleModalState ,因为这些是在呈现模板时传递给模板的值。

    变化的原因

    请记住,Composition API并不是更改,因为它纯粹是可选的。主要动机是允许更好的代码组织和组件之间的代码重用(因为mixin本质上是一种反模式)。

    如果你认为在这个例子中重构App组件以使用Composition API是没有必要的,那你的想法是正确的。但是,如果这是一个更大的组件,或者我们需要与其他组件共享其功能,那么你就会发现它的用处。

    Teleporting content

    如果你曾经创建过模态功能,你会知道它通常被放置在关闭的 </body> 标签之前。

    <body>
      <div>
        <!--main page content here-->
      </div>
      <!--modal here-->
    </body>
    

    这样做是因为模式通常具有覆盖页面的背景,要使用CSS来实现,您不需要处理父元素定位和z-index堆栈上下文,因此最简单的解决方案是将模式放在DOM的最底部。

    但这在Vue.js中产生了一个问题,它假定UI将作为一个单一的组件树来构建。为了允许将树的片段移动到DOM中的其他位置,在Vue 3中添加了一个新的 teleport 组件。

    要使用teleport,首先要在页面上添加一个元素,我们要将模态内容移动到该页面。我们将转到 index.html,并将ID为 modal-wrapperdiv 放在Vue的安装元素旁边。

    index.html

    <body>
      ...
      <div id="app"></div><!--Vue mounting element-->
      <div id="modal-wrapper">
        <!--modal should get moved here-->
      </div>
    </body>
    

    现在,回到 App.vue,我们将模态内容包装在 teleport 组件中。我们还需要指定一个 to 属性,为该属性分配一个查询选择器,以标识目标元素,在本例中为 #modal-wrapper

    src/App.vue

    <template>
      <button @click="toggleModalState">Open modal</button>
      <teleport to="#modal-wrapper">
        <modal v-if="modalOpen">
          <p>Hello, I'm a modal window.</p>
        </modal>
      </teleport>
    </template>
    

    就是这样,teleport 中的任何内容都将渲染在目标元素中。

    Emitting 和 event

    现在,让我们在modal中添加一个按钮,让它可以被关闭。要做到这一点,我们要在modal 模板中添加一个按钮元素,并添加一个点击处理程序,该处理程序会发出一个 close 事件。

    src/Modal.vue

    <template>
      <div class="modal">
        <slot></slot>
        <button @click="$emit('close')">Dismiss</button>
      </div>
    </template>
    

    然后,该事件将由父组件捕获,并将切换 modalState 的值,从逻辑上将其设置为 false 并导致窗口关闭。

    src/App.vue

    <template>
      ...
        <modal 
          v-if="modalOpen" 
          @click="toggleModalState"
        >
          <p>Hello, I'm a modal window.</p>
        </modal>
      </teleport>
    </template>
    

    到目前为止,此功能与Vue 2中的功能相同。但是,现在在Vue 3中,建议您使用新的 emits 组件选项显式声明组件的事件。就像props一样,你可以简单地创建一个字符串数组来命名组件将发出的每个事件。

    src/Modal.vue

    <template>...</template>
    <script>
    export default {
      emits: [ "close" ]
    }
    </script>
    

    变化的原因

    想象一下,打开别人写的组件的文件,看到它的prop和event明文声明。马上,你就会明白这个组件的界面,也就是它要发送和接收什么。

    除了提供自说明代码外,你还可以使用事件声明来验证你的事件有效载荷,虽然我在这个例子中找不到理由来验证。

    了解更多:Emits Option RFC

    样式插槽内容

    为了使模态可重用,我们提供了一个内容插槽。让我们开始通过为组件添加 style 标签来为内容设置样式。

    在我们的组件中使用 scoped CSS是一种很好的做法,以确保我们提供的规则不会对页面中的其他内容产生意外影响。

    让我们把任何被放入插槽中的段落文字变成斜体。要做到这一点,我们将使用 p 选择器创建一个新的CSS规则。

    src/Modal.vue

    <template>...</template>
    <script>...</script>
    <style scoped>
      p {
        font-style: italic;
      }
    </style>
    

    如果你尝试一下,你会发现这一点并不奏效。问题是,在编译时,当插槽内容仍属于父对象时,Scoped styling是在编译时确定的。

    Vue 3提供的解决方案是提供一个伪选择器 ::v-slotted(),允许你在提供插槽的组件中使用范围化规则来针对插槽内容。

    这是我们的用法:

    <style scoped>
      ::v-slotted(p) {
        font-style: italic;
      }
    </style>
    

    Vue 3还包含了其他一些新的Scoped Styling选择器:::v-deep::v-global,你可以在这里了解更多:Scoped Styles RFC

    其他改变

    好吧,这就是我可以在一个简单示例中涵盖的所有新功能。主要的我基本都有了,但这里有一些我认为很重要的,在总结文章之前,我觉得足够重要,可以自己研究一下。

    添加的:

    移出的:

    更改的:

    关于Vue Router也有各种变化,但我将专门用一篇文章来介绍这些变化!


    本文首发于公众号 《前端全栈开发者》,私信回复:大礼包,送某网精品视频课程网盘资料,准能为你节省不少钱!

    展开全文
  • Vue2.x从入门到实战

    万人学习 2018-01-01 08:26:42
    课程从Vue2.x版本的入门,一直到实战课程共58集。包括内部指令、全局API、选项、实例和内置组件、Vue-cli、Vue-router、vuex。后有一门Vue实战,带你作一个快餐店的收银系统。
  • Vue2与Vue3的区别

    千次阅读 2020-09-28 22:14:42
    Vue2和Vue3开发组件有什么区别 vue2和vue3双向数据绑定的区别 总结: 1. vue2和vue3双向数据绑定原理发生了改变 vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式...

    参考文档:

    Vue2和Vue3开发组件有什么区别

    vue2和vue3双向数据绑定的区别

    总结:

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

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

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

    相比于vue2.x,使用proxy的优势如下

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

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

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

    3. 更精准的变更通知。

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

    4.部分命令发生了变化:

    下载安装 npm install -g vue@cli
    删除了vue list
    创建项目 vue create
    启动项目 npm run serve


    5.默认项目目录结构也发生了变化:

    移除了配置文件目录,config 和 build 文件夹 移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中 在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件

    6. 3.0 新加入了 TypeScript 以及 PWA 的支持

    7.vue2和vue3组件发送改变
    具体参考Vue2和Vue3开发组件有什么区别

    展开全文
  • Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由前情回顾在上一篇《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(三)认识项目所有文件》,我们已经重新整理了...
  • Vue2+VueRouter2+webpack 构建项目实战(一)准备工作

    万次阅读 多人点赞 2016-11-15 14:43:06
    Vue2+VueRouter2+webpack 构建项目实战(一)准备工作之前写的博客没有采用打包工具,而是直接引用js的方式来做的。这种方式很扯淡,也因此,我写了三篇博客之后就没有再写了。通过几个月的学习和实战,基本厘清了...
  • Vue3+与Vue2共存

    千次阅读 2020-05-04 21:57:53
    目前大多数新项目都会采用Vue3+进行开发,然而在公司还需要维护一些之前使用老旧版本Vue2开发的项目,此时则需要我们在电脑上安装vue2与vue3+了。 1、 先来说说npm安装命令的参数-g -g参数可以将js包进行全局安装,...
  • Vue2+VueRouter2+webpack 构建项目实战(五)配置子路由

    万次阅读 多人点赞 2016-11-18 10:14:17
    Vue2+VueRouter2+webpack 构建项目实战(五)配置子路由前情回顾《Vue2+VueRouter2+webpack 构建项目实战(一)准备工作》《Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构》《Vue2+VueRouter2+...
  • vue2升级vue3.x

    千次阅读 2019-08-08 15:26:57
    无需要装卸 vue2.x : npm uninstall -g vue-cli 可以直接升级 npm install -g @vue/cli
  • Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述前言2016年,我写了一系列的 VUE 入门教程,当时写这一系列博文的时候,我也只是一个菜鸟,甚至在写的过程中关闭了代码审查,否则通不过...
  • Leaflet的Vue组件 — Vue2Leaflet

    万次阅读 热门讨论 2018-04-29 18:18:09
    原文地址:Leaflet的Vue组件 — Vue2Leaflet 这两天折腾Vue,在GitHub上发现了一个开源项目Vue2Leaflet,Vue2Leaflet是一个Vue框架的JavaScript库,封装了Leaflet,它使构建地图变得更简单。本文简单介绍了如何...
  • Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(二)安装 nodejs 环境以及 vue-cli 构建初始项目在上一篇《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述》中,我简要的说明了...
  • Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件前情回顾在上一篇文章《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(六)将接口用 webpack 代理到本地》中,我们顺利的将...
  • Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(五)配置 Axios api 接口调用文件前情回顾在上一篇《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由》,我们通过...
  • vue集成vue2-animate插件实现常用动画

    千次阅读 2019-05-21 15:00:56
    vue2集成vue2-animate插件实现常用动画 vue的一些常用动画animate css来实现,针对vue2出现了一款插件vue2-animate,其实更权威的介绍在这里欢迎访问https://www.npmjs.com/package/vue2-animate,看一下如何使用呢...
  • Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构通过上一篇博文《Vue2+VueRouter2+webpack 构建项目实战(一)准备工作》,我们已经新建好了一个基于vue+webpack的项目。本篇博文将详细的厘清一下这个...
  • 带你体验Vue2和Vue3开发组件有什么区别

    千次阅读 多人点赞 2020-03-08 21:59:18
    随着Vue3的来临,很多童鞋会疑惑到底Vue3和Vue2有什么区别。
  • Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(三)认识项目所有文件在《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(二)安装 nodejs 环境以及 vue-cli 构建初始项目》中,我们通过安装 ...
  • 官方文档 vue https://cn.vuejs.org/v2/guide/vue-cli https://cli.vuejs.org/zh/ vue2 vue3 基于 vue-cli 基于 @vue/cli 初始化项目 ...
  • 搭建vue2 vue-router2 webpack项目

    千次阅读 2016-11-18 18:37:51
    原文不断修错,补充等,这里更新会滞后一些,建议直接查看原文。...项目地址http://git.oschina.net/qinshenxue/vue2practice 之前出了一篇vue@1.x工程配置的文章《vue vue-router webpack》(下面简
  • 好用的vue图文编辑vue2-editor

    万次阅读 2017-12-27 13:46:57
    请参考: https://github.com/davidroyer/vue2-editor ...首先,使用npm安装 npm install --save vue2-editor 具体代码: import { VueEditor } from 'vue2-editor' export default { compone
  • 这个插件基于最新的Vue官方语法高亮文件添加了语法高亮,并且依据Vue 2的API添加了代码片段。 支持语言 VUE(.vue)HTML格式(.html)使用Javascript(.js文件)打字稿(.TS)帕格(.pug) 官网地址:...
  • vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(一) vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(二) vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(三) vue最简单的入门教程+实战+Vue...
  • vue2使用animate css

    万次阅读 2017-04-28 15:00:53
    vue2使用animate css先上几个链接 ... vue2插件vue2-animateDEMO: vue2-animatedemo:vue2-animate-demo 我想用过animatecss的都知道这是一个极其简单而又酷炫的css动画库,但是我想在vue2中使用anima
  • vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(一) vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(二) vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(三) vue最简单的入门教程+实战+Vue...
  • Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十一)阶段性小结前情回顾去年写的那一套东西,虽然我也写得非常的认真,但是其中还是有点绕了。当时水平不行。现在我重新整理出来的博文如下,希望对各位...
  • Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表前情回顾《Vue2+VueRouter2+webpack 构建项目实战(一)准备工作》《Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构》《Vue2+Vue...
  • Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(六)将接口用 webpack 代理到本地前情回顾在上一篇博文《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(五)配置 Axios api 接口调用文件》中,...
  • Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先 2017年8月补充 2016年,我写了一系列的 VUE 入门教程,当时写这一系列博文的时候,我也只是一个菜鸟,甚至在写的过程中关闭了代码审查,否则通...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 128,053
精华内容 51,221
关键字:

vue2

vue 订阅