基于vue文档的笔记

发表于 分类于 阅读次数： 本文字数： 655 阅读时长 ≈ 2 分钟

前置知识

ES

ES modules 是原生 JavaScript 提供的模块功能，逐渐被更多的浏览器支持
形如：

1
2
3
4
5
6
7
8
9

<script type="module">
<!-- something -->    
</script>

<script>
import { x,y } from './module.js
</script>

vue基础

应用

每个 Vue 应用都是通过createApp函数创建一个新的应用实例，例如：

1
2
3
4
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp({App})

createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件，最后得到一个树状结构

模板

当根组件没有设置 template 选项时，Vue 将自动使用容器的 innerHTML 作为模板
模板中可以使用指令，指令由 v- 作为前缀，表明它们是一些由 Vue 提供的特殊 attribute,指令最常用的功能是绑定html属性到某个元素
双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，需要使用 v-html 指令：
<span v-html="rawHtml"></span></p>

想要响应式地绑定一个 attribute，应该使用 v-bind 指令<div v-bind:id="dynamicId"></div>
简写语法为：<div :id="dynamicId"></div> 同名简写(3.4以上版本):<div :id></div> js表达式支持:

1
2
3
4
5
6

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div :id="`list-${id}`"></div>

响应式

这里使用选项式api,使用data 选项来声明组件的响应式状态。此选项的值应为返回一个对象的函数
在 Vue 3 中，数据是基于JavaScript Proxy 实现响应式的,也就是通过一个代理来更新对象状态，vue3中原始对象不会变成响应式代理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    // 在其他方法或是生命周期中也可以调用方法
    this.increment()
  }
}

Vue 自动为 methods 中的方法绑定了永远指向组件实例的 this,且嵌套的对象变化也能相应，也就是类似json的格式可以随意修改
当你修改了响应式状态时，DOM 会被自动更新。但是需要注意的是，DOM 更新不是同步的。Vue 会在“next tick”更新周期中缓冲所有状态的修改，以确保不管你进行了多少次状态修改，每个组件都只会被更新一次

创建有自己状态的方法：
如果需要多个有独立状态的方法，则要在created期间创建这样的函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

export default {
  created() {
    // 每个实例都有了自己的预置防抖的处理函数
    this.debouncedClick = _.debounce(this.click, 500)
  },
  unmounted() {
    // 最好是在组件卸载时
    // 清除掉防抖计时器
    this.debouncedClick.cancel()
  },
  methods: {
    click() {
      // ... 对点击的响应 ...
    }
  }
}