vue3学习之旅--邂逅vue3-了解认识Vue3(二)

续上文：
vue3学习之旅–邂逅vue3-了解认识Vue3

计数器案例（体验Vue）

<div id="app"></div>
  <script src="../vue3/vue3.js"></script>
  <script>
    Vue.createApp({
      template: `
      <div>
        <h2>{{message}}</h2>
        <h2>{{counter}}</h2>
        <button @click='increment'>+</button>  
        <button @click='decrement'>-</button>  
      </div>
      `,
      // 数据
      data() {
        return {
          message: 'hello Vue3!',
          counter: 0
        }
      },
      // 方法
      methods: {
        increment() {
          this.counter++;
        }, 
        decrement() {
          this.counter--;
        }
      }
    }).mount('#app')
  </script>

Vue的特点

声明式和命令式

原生开发和Vue开发的模式和特点，我们会发现是完全不同的，这里其实涉及到两种不同的编程范式：

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

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

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

1. 我们每完成一个操作，都需要通过JavaScript编写一条代码，来给浏览器一个指令；
2. 这样的编写代码的过程，我们称之为命令式编程；
3. 在早期的原生JavaScript和jQuery开发的过程中，我们都是通过这种命令式的方式在编写代码的；

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

1. 我们会在createApp传入的对象中声明需要的内容，模板template、数据data、方法methods；
2. 这样的编写代码的过程，我们称之为是声明式编程；
3. 目前Vue、React、Angular的编程模式，我们称之为声明式编程。

MVVM 模型

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

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

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

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

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

template属性

template属性概念

在使用createApp的时候，我们传入了一个对象，接下来我们详细解析一下之前传入的属性分别代表什么含义。

template属性：表示的是Vue需要帮助我们渲染的模板信息：

1. 目前我们看到它里面有很多的HTML标签，这些标签会替换掉我们挂载到的元素（比如id为app的div）的 innerHTML；
2. 模板中有一些奇怪的语法，比如 {{}}，比如 @click，这些都是模板特有的语法，我们会在后面讲到；
3. 但是这个模板的写法有点过于别扭了，并且IDE很有可能没有任何提示，阻碍我们编程的效率。

Vue提供了两种方式：

方式一：使用script标签，并且标记它的类型为 x-template

方式二：使用任意标签（通常使用template标签，因为不会被浏览器渲染），设置id。template元素是一种用于保存客户端内容的机制，该内容再加载页面时不会被呈现，但随后可以在运行时使 用JavaScript实例化；

template写法

**注意：**在createApp的对象中，我们需要传入的template以 # 开头：

如果字符串是以 # 开始，那么它将被用作 querySelector，并且使用匹配元素的 innerHTML 作为模板字符串；

1. 使用script标签

<!-- template 模板写法一  -->
  <!-- 使用script进行模板的书写，需要指定type属性为 x-template -->
  <script type="x-template" id="mao">
    <div>
      <h2>{{message}}</h2>
      <h2>{{counter}}</h2>
      <button @click='increment'>+</button>  
      <button @click='decrement'>-</button>  
    </div>
  </script>

<script>
	// 模板template的使用
    Vue.createApp({
        template:'#mao'
    })
</script>

2. 使用template标签

注意：<template> 标签并不是Vue独有的。这个标签是html本身已经定义过的，也就是说浏览器本身就支持。

**特点：**template标签内的标签和数据，并不会被浏览器解析到页面上。（浏览器会处理这个标签内的内容，但是不会进行渲染）

<!-- template 模板写法二  -->
  <!-- 直接在 template标签内书写模板 -->
  <template id="mao">
    <div>
      <h2>{{message}}</h2>
      <h2>{{counter}}</h2>
      <button @click='increment'>+</button>  
      <button @click='decrement'>-</button>  
    </div>
  </template>

data属性

概念

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

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

在Vue3.x的时候，必须传入一个函数，否则就会直接在浏览器中报错；

data中返回的对象会被Vue的响应式系统劫持，之后对该对象的修改或者访问都会在劫持中被处理：

1. 所以我们在template中通过 {{counter}} 访问counter，可以从对象中获取到数据；
2. 所以我们修改counter的值时，template中的 {{counter}}也会发生改变

具体这种响应式的原理，将会在后面的学习中讲到

methods属性

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

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

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

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

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

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

其他属性

当然，这里还可以定义很多其他的属性，我们会在后续进行深入学习。比如：

1. 比如props、computed、watch、emits、setup等等；
2. 也包括很多的生命周期函数

Vue3的源码

如果想要学习Vue的源码，比如看createApp的实现过程，应该怎么办呢
注意：Vue3的源代码是通过yarn包管理工具进行管理的。我们可以通过npm全局安装 yarn。npm install -g yarn

1. 在GitHub上搜索 vue-next，下载源代码；这里推荐通过 git clone 的方式下载；git clone https://github.com/vuejs/vue-next.git
   

2. 安装Vue源码项目相关的依赖；

   • 执行 yarn install

3. 对项目执行打包操作

   • 执行yarn dev（执行前修改脚本）（sourcemap也就是代码映射，可以映射当前调试的打包之后的代码具体来自哪一个源文件）

     "script": {
         "dev":"node scripts/dev.js --sourcemap"
     }
     

4. 通过 packages/vue/dist/vue.global.js 调试代码