es5,es6继承的区别ES6的继承，认识Vue

金色的雨570
106 阅读9分钟

es5,es6继承的区别？

ES5继承是先创建子类的实力再创建父类的方法添加到this上，通过原型和构造函数机制来实现的

// ES5的继承
// 原型链方式: 子类的原型指向父类的实例
// 缺点: 1. 因为原型链继承共享实例属性,属于引用类型传值, 修改某个实例的属性会影响其他的实例 2. 不能实时向父类的构造函数中传值, 很不方便
function Parent() {
    this.values = [1];
}


function Child(){

}
Child.prototype = new Parent();
const child1 = new Child();
console.log(child1.values); // [ 1 ]
child1.values.push(2);
const child2 = new Child();
console.log(child2.values); // [ 1, 2 ]

原型链继承共享实例属性，属于引用类型传值，修改某个实例的属性会影响其他实例，

ES6的继承

ES6的继承是先创建父类的实例对象this(必须先调用super方法), 再调用子类的构造函数修改this.

通过关键字class定义类, extends关键字实现继承. 子类必须在constructor方法中调用super方法否则创建实例报错. 因为子类没有this对象, 而是使用父类的this, 然后对其进行加工

super关键字指代父类的this, 在子类的构造函数中, 必须先调用super, 然后才能使用this

// ES6的继承
// 在子类的构造器中先调用super(), 创建出父类实例, 然后再去修改子类中的this去完善子类
class Parent {
    constructor(a, b) {
        this.a = a;
        this.b = b;
    }
}

class Child extends Parent {
    constructor(a, b, c) {
        super(a, b);
        this.c = c;
    }
}

const child = new Child(1, 2, 3);

认识Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式 JavaScript框架。

全称是Vue.js或者Vuejs；它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型；

帮助你高效地开发用户界面，无论任务是简单还是复杂；

什么是渐进式框架呢？

表示我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目；

目前需要学习Vue3吗？

在2020年的9月19日，万众期待的Vue3终于发布了正式版，命名为“One Piece”。

更好的性能；更小的包体积；更好的TypeScript集成；更优秀的API设计。那么现在是否是学习vue3的时间呢？

答案是肯定的Vue3目前已经是稳定的版本，并且Vue3在2022年2月7日已经成为默认安装版本；目前社区也经过一定时间的沉淀，更加的完善了，包括AntDesignVue、Element-Plus都提供了对Vue3的支持，所以很多公司目前新的项目都已经在使用Vue3来进行开发了。并且在面试的时候，几乎都会问到各种各样Vue3相关的问题；

如何使用Vue呢？

Vue的本质，就是一个JavaScript的库：

刚开始我们不需要把它想象的非常复杂；

我们就把它理解成一个已经帮助我们封装好的库；

在项目中可以引入并且使用它即可。

那么安装和使用Vue这个JavaScript库有哪些方式呢？

方式一：在页面中通过CDN的方式来引入；

方式二：下载Vue的JavaScript文件，并且自己手动引入；

方式三：通过npm包管理工具安装使用它（webpack再讲）；

方式四：直接通过Vue CLI创建项目，并且使用它；

方式一：CDN引入

Vue的CDN引入：

<script src="[https://unpkg.com/vue@next"></script>](https://unpkg.com/vue@next"></script>)

Hello Vue案例的实现：

<h2>哈哈哈</h2>
  <p>我是内容, 呵呵呵呵</p>


  <div id="app"></div>
  
  <!-- CDN地址 -->
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    // 使用Vue
    const app = Vue.createApp({
      template: `<h2>Hello World</h2><span>呵呵呵</span>`
    })
    // 挂载
    app.mount("#app")

vue引入方式本地引入

下载Vue的源码，可以直接打开CDN的链接：打

开链接，复制其中所有的代码；

创建一个新的文件，比如vue.js，将代码复制到其中；

<script src="../js/vue.js"></script>

通过script标签，引入刚才的文件：你好啊，Vue3，案例的实现：

<div id="app"></div>
  
  <script src="./lib/vue.js"></script>
  <script>
    
    // 1.创建app
    const app = Vue.createApp({
      template: `<h1>Hello Vue</h1>`
    })


    // 2.挂载app
    app.mount("#app")

Vue初体验

案例体验一：动态展示Hello World数据案例

<div id="app"></div>
  
  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // 插值语法: {{title}}
      template: `<h2>{{message}}</h2>`,
      data: function() {
        return {
          title: "Hello World",
          message: "你好啊, Vue3"
        }
      }
    })
    app.mount("#app")
  </script>

体验二：展示列表的数据案例

<div id="app"></div>


  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      template: `
        <h2>电影列表</h2>
        <ul>
          <li v-for="item in movies">{{item}}</li>
        </ul>
      `,
      data: function() {
        return {
          message: "你好啊, 李银河",
          movies: [ "大话西游", "星际穿越", "盗梦空间", "少年派", "飞驰人生" ]
        }
      }
    })
    app.mount("#app")

体验三：计数器功能实现

<div id="app"></div>


  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      template: `
        <h2>当前计数: {{counter}}</h2>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
      `,
      data: function() {
        return {
          counter: 0
        }
      },
      methods: {
        increment: function() {
          this.counter++
        },
        decrement: function() {
          this.counter--
        }
      }
    })
    app.mount("#app")
  </script>

计数器案例重构，声明式编程

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div id="app">
    <h2>当前计数: {{counter}}</h2>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
  
  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      data: function() {
        return {
          counter: 0
        }
      },
      methods: {
        increment: function() {
          this.counter++
        },
        decrement: function() {
          this.counter--
        }
      }
    })
    app.mount("#app")
  </script>
</body>
</html>

命令时编程，原生实现计数器

<h2>当前计数: <span class="counter"></span></h2>
  <button class="add">+1</button>
  <button class="sub">-1</button>


  <script>
    // 1.获取dom
    const h2El = document.querySelector("h2")
    const counterEl = document.querySelector(".counter")
    const addBtnEl = document.querySelector(".add")
    const subBtnEl = document.querySelector(".sub")


    // 2.定义一个变量记录数据
    let counter = 100
    counterEl.textContent = counter


    // 2.监听按钮的点击
    addBtnEl.onclick = function() {
      counter++
      counterEl.textContent = counter
    }
    subBtnEl.onclick = function() {
      counter--
      counterEl.textContent = counter
    }


  </script>

1.拿到元素，获取dom命令2监听点击，获取元素，监听按钮3.发生点击count++将最新的counter设置到dom上

计数器案例

如果我们希望实现一个计数器的案例：

点击+1，那么内容会显示数字+1；

点击-1，那么内容会显示数字-1；

我们可以选择很多种方式来实现：

在这里我们就对比原生和Vue的实现方式的不同。

声明式和命令式

原生开发和Vue开发的模式和特点，我们会发现是完全不同的，

这里其实涉及到两种不同的编程范式：

命令式编程和声明式编程；

命令式编程关注的是 “how to do”自己完成整个how的过程；

声明式编程关注的是 “what to do”，由框架(机器)完成 “how”的过程；

在原生的实现过程中，我们是如何操作的呢？

我们每完成一个操作，都需要通过JavaScript编写一条代码，来给浏览器一个指令；

这样的编写代码的过程，我们称之为命令式编程；

在早期的原生JavaScript和jQuery开发的过程中，我们都是通过这种命令式的方式在编写代码的；

在Vue的实现过程中，我们是如何操作的呢？我

们会在createApp传入的对象中声明需要的内容，模板template、数据data、方法methods；

这样的编写代码的过程，我们称之为是声明式编程；

目前Vue、React、Angular、小程序的编程模式，我们称之为声明式编程；

MVVM模型

MVC和MVVM都是一种软件的体系结构

MVC是Model – View –Controller的简称，是在前期被使用非常框架的架构模式，比如iOS、前端；

MVVM是Model-View-ViewModel的简称，是目前非常流行的架构模式；

通常情况下，我们也经常称Vue是一个MVVM的框架。

Vue官方其实有说明，Vue虽然并没有完全遵守MVVM的模型，但是整个设计是受到它的启发的。

MVVM模型

MVC和MVVM都是一种软件的体系结构

MVC是Model – View –Controller的简称，是在前期被使用非常框架的架构模式，比如iOS、前端；

MVVM是Model-View-ViewModel的简称，是目前非常流行的架构模式；

通常情况下，我们也经常称Vue是一个MVVM的框架。

Vue官方其实有说明，Vue虽然并没有完全遵守MVVM的模型，但是整个设计是受到它的启发的。

data属性

data属性是传入一个函数，并且该函数需要返回一个对象：

在Vue2.x的时候，也可以传入一个对象（虽然官方推荐是一个函数）；

在Vue3.x的时候，必须传入一个函数，否则就会直接在浏览器中报错；data中返回的对象会被Vue的响应式系统劫持，之后对该对象的修改或者访问都会在劫持中被处理：

所以我们在template或者app中通过 {{counter}} 访问counter，

可以从对象中获取到数据；所以我们修改counter的值时，app中的 {{counter}}也会发生改变；

具体这种响应式的原理，我们后面会有专门的篇幅来讲解。

<div id="app">
    <h2>{{message}}</h2>
    <button @click="changeMessage">改变message</button>
  </div>
  
  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data: option api
      data: function() {
        return {
          message: "Hello Data"
        }
      },
      // methods: option api
      methods: {
        changeMessage: function() {
          this.message = "你好, 师姐!"
        }
      }
    })


    app.mount("#app")
  </script>

Object.defineProperty(info,name,{set:get:)}

new Proxy(info,{set:get:});

methods属性

methods属性是一个对象，通常我们会在这个对象中定义很多的方法：

这些方法可以被绑定到 模板中；

在该方法中，我们可以使用this关键字来直接访问到data中返回的对象的属性；

对于有经验的同学，在这里我提一个问题，官方文档有这么一段描述：

问题一：为什么不能使用箭头函数（官方文档有给出解释）？

问题二：不使用箭头函数的情况下，this到底指向的是什么？（可以作为一道面试题）

<div id="app">
    <h2>当前计数: {{counter}}</h2>
    <button @click="increment">+1</button>
  </div>


  <script src="./lib/vue.js"></script>
  <script>


    console.log(this)


    const app = Vue.createApp({
      data: function() {
        return {
          counter: 0
        }
      },


      // methods: option api
      methods: {
        increment: function() {
          //this是wenidnow默认执行的
          //increment（）-》window
          //obj.incrmenet=increment
          //obj.increment()//obj对象
          //increment.apply("aaa")//aaa
          this.counter++
        },
        //es6写法
        increment(){
        }
        // 强调: methods中函数不能写成箭头函数
        // increment: () => {
        //   console.log(this)//全局作用域上层作用域window
        // }
      }
    })


    app.mount("#app")

题一：不能使用箭头函数？

我们在methods中要使用data返回对象中的数据：

那么这个this是必须有值的，并且应该可以通过this获取到data返回对象中的数据。

那么我们这个this能不能是window呢？

不可以是window，因为window中我们无法获取到data返回对象中的数据；

但是如果我们使用箭头函数，那么这个this就会是window了；

为什么是window呢？

这里涉及到箭头函数使用this的查找规则，它会在自己的上层作用于中来查找this；

最终刚好找到的是script作用于中的this，所以就是window；

问题二：this到底指向什么？

事实上Vue的源码当中就是对methods中的所有函数进行了遍历，并且通过bind绑定了this：

其他属性

当然，这里还可以定义很多其他的属性，我们会在后续进行讲解：

比如props、computed、watch、emits、setup等等；

也包括很多的生命周期函数；不用着急，我们会一个个学习它们的。

VSCode代码片段

我们在前面练习Vue的过程中，有些代码片段是需要经常写的，我们再VSCode中我们可以生成一个代码片段，方便我们快速生成。

VSCode中的代码片段有固定的格式，所以我们一般会借助于一个在线工具来完成。具体的步骤如下：

第一步，复制自己需要生成代码片段的代码；

第二步，snippet-generator.app/在该网站中生成代码片段；

第三步，在VSCode中配置代码片段；

代码片段过程

avatar
文章
阅读
粉丝