一、Vue3初体验

1. Vue3的引入

1.1 CDN

  

    
Hello World
  

  
  

1.2 本地引用

2. 计数器案例

先来个计数器案例来体验一下vue的使用吧。有两个按钮，点击+1和点击-1。

2.1 原生实现

    
0
    +1
    -1

    

2.2 vue实现

3. Vue.createApp的参数

3.1 template

写法一 es6模板字符串

    Vue.createApp({
      template: `
        

          
{{message}}
          
{{counter}}
          +1
          -1
        
      `,
    })

写法二 script标签

写法三

template元素是一种用于保存客户端内容的机制，该内容再加载页面时不会被呈现，但随后可以在运行时使用JavaScript实例化；该标签是html原生标签。

3.2 data属性

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

• 在Vue2.x的时候，也可以传入一个对象（虽然官方推荐是一个函数）；
• 在Vue3.x的时候，必须传入一个函数，否则就会直接在浏览器中报错；

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

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

3.3 methods属性

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

• 这些方法可以被绑定到 template 模板中；
• 在该方法中，我们可以使用this关键字来直接访问到data中返回的对象的属性；
• 不能使用箭头函数，this指向了window。

不使用箭头函数的情况下，this到底指向的是什么（面试）？

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

image.png

4. vue3源码查看

1. 在GitHub上搜索 vue-next，下载源代码（最好是tag到稳定版本）；这里推荐通过 git clone 的方式下载；

2. 第二步：安装Vue源码项目相关的依赖:

yarn install

3. 第三步：对项目执行打包操作:
   
   image.png
   
   执行yarn dev。
4. 通过 packages/vue/dist/vue.global.js 调试代码（debugger）