图片
.vue 文件包含三种类型的顶级语言块 、
https://ask.dcloud.net.cn/art...
npm 全称为 Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器。
Node.js 是一个开源和跨平台的 JavaScript 运行时环境,Node.js 在浏览器之外运行 V8 JavaScript 引擎（Google Chrome 的内核）。
webpack 是 JavaScript 打包器(module bundler)
I 组件规范
组件是视图层的基本组成单元,组件是一个单独且可复用的功能模块的封装,允许我们使用小型、独立和通常可复用的组件构建大型应用。
页面是一种特殊的组件图片
1.1 组件的组成部分
每个组件，包括如下几个部分：
以组件名称为标记的开始标签和结束标签
组件内容
组件属性、组件属性值。
所有组件与属性名都是小写，单词之间以连字符-连接。
1.2 公共属性列表
属性名 类型 描述 注解
id String 组件的唯一标示 一般用于获取组件上下文对象（如：VideoContext），需要保持整个页面唯一
ref String vue中组件的唯一标示 用来给子组件注册引用信息
class String 组件的样式类 在对应的 css 中定义的样式类
style String 组件的内联样式 可以动态设置的内联样式
hidden Boolean 组件是否隐藏 所有组件默认是显示的
data-* Any 自定义属性 组件上触发的事件时，会发送给事件处理函数
@* EventHandler 组件的事件
还有一类特殊属性以v-开头，称之为vue指令，如v-if、v-else、v-for、v-model。
https://uniapp.dcloud.io/tuto...模板指令
1.3 组件中使用js变量
在内容区使用时，使用两个花括号来包裹，如下面的buttonText
在属性值中使用时，属性名的前面要加冒号前缀
1.4 数据传递
子组件和父组件通信可以通过this.$emit将方法和数据传递给父组件。
hi...h2
1.5 组件的事件
事件就是在指定的条件下触发某个js方法。
1.6 vue组件的生命周期
beforeCreate：在实例初始化之前被调用
created：在实例创建完成后被立即调用
beforeMount：在挂载开始之前被调用
mounted：挂载到实例上去之后调用，如果需要子组件完全挂载之后在执行操作可以使用$nextTick
beforeUpdate:数据更新时调用，发生在虚拟 DOM 打补丁之前
updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
beforeDestroy:实例销毁之前调用。
destroyed:Vue 实例销毁后调用。
https://v3.cn.vuejs.org/guide...生命周期图示
II 组件的 data 选项和methods 选项
2.1 组件的 data 选项
组件的 data 选项是一个函数，Vue 会在创建新组件实例的过程中调用此函数。
const app = Vue.createApp({
data() {
return { count: 4 }
}
})//传递给 createApp 的选项用于配置根组件
data()返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。它还为内部 property 保留 _ 前缀，所以避免使用这两个字符开头的顶级 data property 名称（该对象的任何顶级 property 也会直接通过组件实例暴露出来）。
const vm = app.mount('#app')//返回的是根组件实例
console.log(vm.$data.count) // => 4
console.log(vm.count) // => 4
2.2 methods 选项
methods 选项向组件实例添加方法，可以在模板支持 JavaScript 表达式的任何地方调用。
const app = Vue.createApp({
data() {
return { count: 4 }
},
methods: {
increment() {
//Vue 自动为 methods 绑定 this，`this` 指向该组件实例this.count++
}
}
})
2.3 防抖(debounce) 和 节流(throttling)
响应跟不上触发频率的场景：鼠标移动事件onmousemove、滚动滚动条事件onscroll、窗口大小改变事件onresize、 实时检查输入（绑定onkeyup事件发请求），瞬间的操作都会导致这些事件会被高频触发。如果事件的回调函数较为复杂，就会导致响应跟不上触发，出现页面卡顿，假死现象。
debounce是针对响应跟不上触发频率这类问题的解决方案: 在时间周期内，当事件快速连续不断触发时，动作只会执行一次。但当触发间断大于我们设定的时间间隔时，动作就会有多次执行。
延迟debounce: 在周期结束时执行
图片
在这里插入图片描述
前缘debounce（推荐）: 在周期开始时执行
图片
在这里插入图片描述
Vue 没有内置支持防抖和节流，可以使用 Lodash 库来实现。
在生命周期钩子created 里添加该防抖函数,使组件实例彼此独立，不共享相同的防抖函数。
app.component('save-button', {
created() {
// 使用 Lodash 实现防抖
this.debouncedClick = _.debounce(this.click, 500)
},
unmounted() {
// 移除组件时，取消定时器
this.debouncedClick.cancel()
},
methods: {
click() {
// ... 响应点击 ...
}
},
template: `
`
})
III 计算属性
包含响应式数据的复杂逻辑，应该使用计算属性。否则，模板不再是简单的和声明性的。
声明的方式创建了数据之间的依赖关系，更易于测试和理解。
Has published books:
{{ publishedBooksMessage }}
//传递给 createApp 的选项用于配置根组件
Vue.createApp({
data() {
return {
author: {
name: 'John Doe',
books: ['Vue 2 - Advanced Guide',
'Vue 3 - Basic Guide',
'Vue 4 - The Mystery']
}
}
},
computed: {
// a computed getter
publishedBooksMessage() {
// `this` points to the vm instance
return this.author.books.length > 0 ? 'Yes' : 'No'
}
}
}).mount('#computed-basics')//挂载到
3.1 计算属性的缓存机制
计算属性将基于它们的响应依赖关系缓存，计算属性只会在相关响应式依赖发生改变时重新求值。
拿上面的例子来说，只要 author.books 没有发生改变，多次访问 publishedBookMessage 时计算属性会立即返回之前的计算结果，而不必再次执行函数。
3.2 计算属性的 Setter
// ...
computed: {
fullName: {
// getter
get() {
return this.firstName + ' ' + this.lastName
},
// setter
set(newValue) {
const names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新 。
【vue单文件组件(SFC)规范】IV 常见问题
4.1 如何获取上个页面传递的数据
在onLoad里得到，onLoad 的参数是其他页面打开当前页面所传递的数据。
推荐阅读
- node.js|Node开发学习笔记
- Node.js|Express框架概述
- npm|解决npm warn config global `--global`, `--local` are deprecated. use `--location=global` instead.
- mybug|npm WARN config global `--global`, `--local` are deprecated. Use `--location解决方案
- npm|下载完node时npm -v出现warning
- npm|解决 npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead
- Node.js|Node.js16.15.1的一个报错及解决方案
- node.js|nodeJS删除非空文件夹(通过递归和nodeJS对于文件和文件夹的相关操作)
- Node.js|Node.js fs模块(文件模块), 读取和写入 创建、删除(文件/文件夹)