Vue 学习笔记
-
只是照着官方指南敲了敲代码
-
Vue3 学习笔记
只是照着官方指南敲了敲代码
-
只是照着官方指南敲了敲代码
Vue 学习笔记
只是照着官方指南敲了敲代码
Vue3 学习笔记
只是照着官方指南敲了敲代码
只是照着官方指南敲了敲代码
Vue3 官方资料的学习,分成了两个部分,第一部分在另一个工程里 hello-vue3,后面的在本站内记录。
记录 Vue.js 设计与实现的部分学习笔记。
从范式上来看,视图层框架通常分为命令式和声明式。
早年流行的 jQuery 是典型的命令式框架,Vue.js 是声明式框架。
例如,我们把下面的这段话翻译成对应的代码:
- 获取 id 为 app 的 div 标签
- 它的文本内容为 hello world
- 为其绑定点击事件
- 当点击时弹出提示:ok
在框架设计和开发过程中,提供友好的警告信息至关重要。
Vue.js 3 中为了方便的在控制台输出 ref
数据,提供了自定义的 formatter,在 initCustomFormatter
函数中。
在 Chrome 中,打开 DevTools 的设置,勾选 "Console" -> "Enable custom formatters" 开启。
框架的大小也是衡量框架的标准之一。
Vue.js 3 的源代码中,每个 warn
函数的调用都会配合 __DEV__
常量的检查,例如:
Vue.js 3 的声明式解决方案
:
或v-bind
描述动态绑定的属性@
或v-on
来描述事件响应系统是 Vue.js 的重要组成部分,Vue.js 3 采用 Proxy 实现响应式数据。
副作用函数是指会产生副作用的函数。副作用函数的执行会直接或间接影响其他的变量或其他函数的执行。
如下所示:
const state = { text: null }
const obj = { text: 'hello world' }
function effect() {
state.text = obj.text
document.body.innerText = obj.text
}
我们可以使用 reactive() 函数创建一个响应式对象或数组:
<script setup>
在 setup()
函数中手动暴露大量的状态和方法非常繁琐。幸运的是,我们可以通过使用构建工具来简化该操作。
当使用单文件组件(SFC)时,我们可以使用 <script setup>
来大幅度地简化代码。
当你更改响应式状态后,DOM 会自动更新。然而,你得注意 DOM 的更新并不是同步的。
相反,Vue 将缓冲它们直到更新周期的 “下个时机” 以确保无论你进行了多少次状态更改,每个组件都只更新一次。