Vue3核心概念与Option API

鱼雪

从MVC到MVVM

随着Ajax技术流行，前后端分离越来越流行，前端需要处理越来越复杂的视图和数据，前端也迫切需要一种设计模式进行分层处理。MVC设计模式进入前端，诞生了backbone.js，但是由于Controller成很薄，做了一些改良。 Angular.js带来MVVM设计模式。

MVVM的组成:

M: Model(数据层)
V: View(视图层)
VM: viewModel层

核心思想:

不让Model和View直接层，而是通过VM层连接起来。
viewModel能够观察到数据的变化，并对视图对应的内容进行自动更新
viewModel能够监听到视图的变化，并能够通知数据发生变化

Vue：

不完全遵循MVVM模式
也可以直接操作原生DOM，也可以直接去操作V层
Vue.createApp挂载HTML标签，产生vm

                        ViewModel
                  |---------------------|
                  |                     |
|------|          |  |---------------|  |          |---------|
|      |----------|--| DOM Listeners |--|--------->|         |
|      |          |  |---------------|  |          |         |
| View |          |                     |          |  Model  |
|      |          |  |---------------|  |          |         |
|      |<---------|--| Data Bindings |--|----------|         |
|------|          |  |---------------|  |          |---------|
  DOM             |                     |    "Plain JavaScript Objects"
                  |---------------------|
                            Vue

Option API编程风格与优势

let vm = createApp({
  data: {},     // 数据
  methods: {},  // 方法
  computed: {}, // 计算属性
  watch: {},    // 侦听器
  mounted() {}  // 钩子函数
})

优势：

只有一个参数，接受一个对象，包含各类属性，比如data,methods等
非常清晰，语法化特别强
非常适合默认值
this表示vm，操作比较方便

声明式渲染及响应式实现原理

声明式编程
- 不需要编写具体实现，直接调用声明就可以实现功能
Vue中的声明式编程
- 数据通过{{ }}模版语法来完成
- 模版语法支持JS表达式
  - 支持各类表达式
  - 不支持if判断

响应式数据实现原理

通过Proxy对象实现
使用Proxy监控数据
- 更改值时触发set方法
- 获取值时触发get方法

<div id='app'></div>
<script>
  let data = new Proxy(
    {
      msg: "Hello world",
    },
    {
      get(target) {
        console.log("get func call")
        return target.msg
      },
      set(target, key, value) {
        console.log("set func call")
        app.innerHTML = value
      }
    }
  )

  app.innerHTML = data.msg
  setTimeout(() => {
    data.msg = "Hello Vue"
  }, 2000)
</script>

指令系统与事件方法及传参处理

指令系统
- 通过自定义属性实现的一套功能，也是声明式编程的体现
- 在Vue中，通常是添加以v-*字样
常用指令
- v-bind:：操作标签属性，可通过:简写
- v-on:：操作事件，可通过@简写

修改例子代码

操作title属性
点击事件

<div id="app">
  <p :title="message">这是一个段落</p>
  <button @click="message = 'hi' ">点击</button>
</div>

<script>
  let vm = Vue.createApp(
    data(){
      return {
        message: 'hello'
      }
    }
  ).mount('#app')
</script>

添加事件方法例子代码

获取事件使用$event参数
传参在事件函数调用处传参

<div id="app">
  <button @click="toClick($event, 123)">点击</button>
</div>

<script>
  let vm = Vue.createApp(
    methods: {
      toClick(ev, num) {
      }
    }
  ).mount('#app')
</script>

计算属性与侦听器区别

计算属性

由于模版内适用简单的运算逻辑，模版中太多逻辑会导致难以维护。

所以，复杂的逻辑可以移植到计算属性中进行处理。

计算属性与方法很像，但又有不同：

定义在computed中
计算属性具备缓存的能力，方法不具备缓存(可能类似Python生成器的功能)

侦听器

虽然计算属性适应于大多情况。但在某些情况下侦听器更适合

侦听器的目的:

观察和响应Vue实例上的数据变动
有一些数据需要随着其它数据变化而变化

计算属性和侦听器的区别

计算属性
- 适合多个值影响一个值的应用，有return，不适合异步
侦听器
- 适合一个值影响多个值的应用，无return，适合异步逻辑

条件渲染与列表渲染

v-if指令用于条件性地渲染一块内容
- 可以控制DOM是否添加或删除
- 和v-else之间不能添加非v-if类似普通标签
v-for指令
- 产生value,key,index,并按照这个顺序进行取值
条件渲染与列表渲染注意点
- v-if和v-for尽量不要一起使用
- 列表渲染需要添加key属性(不能使用索引，需要自己产生唯一标识)，用来跟踪列表的身份
- template标签形成一个整体容器的隐形标签

class样式与style样式

v-bind用于class和style时可以使用的三种形态

字符串
数组
对象

表单处理与双向数据绑定

表单用于收集表单数据，发送给后端，或将后端数据在前端显示。

通过v-model指令来操作表单，可以非常灵活的实现响应式数据的处理

生命周期钩子函数

生命周期钩子函数就是回调函数，在Vue的某个时机去调用对应的回调函数。

生命周期可分为三个部分：

初始阶段：
- beforeCreate
- created: 大部分时候用于发送请求，因为请求需要时间响应数据
- beforeMount
- mounted
更新阶段
- beforeUpdate
- updated
销毁阶段
- beforeUnmout
- unmounted

从MVC到MVVM​

Option API编程风格与优势​

声明式渲染及响应式实现原理​

指令系统与事件方法及传参处理​

计算属性与侦听器区别​

计算属性​

侦听器​

计算属性和侦听器的区别​

条件渲染与列表渲染​

class样式与style样式​

表单处理与双向数据绑定​

生命周期钩子函数​