Vue 3
关于组件
今天回顾了下2.0关于组件的内容，3.0定义组件的方式多了一种就是通过单文件组件（Single-File Component）的方式将Vue的模板，逻辑和样式放到一个文件中，2.0则不同，它是将模板放到一个属性中，而不是在一个标签里，这样可读性更好，应该也更方便测试。
但代价就是需要使用构建工具，可以把它想象成一个IDE工具，只不过是命令行的形式，需要付出一定的学习成本，我看Visual Studio 2022使用的就是Vite，把它集成进了IDE，即使我不会用Vite也能构建Vue项目，很方便。
也有不依赖构建工具的替代方案petite-vue
Vue对象的参数叫做配置对象
用来显示文本的{{ }}叫做插值语法，是写在标签体之间
在Chrome浏览器上按shift+F5强制刷新页面
在Vue2.0的DevTool中可以下载Vue的开发者工具，Chrome和FireFox的都支持
Vue 2
1、想要使用Vue，首先要创建一个Vue实例，同时要在html中声明一个容器，容器与实例通过选择器进行绑定
2、容器与实例是一一绑定的关系
3、真实开发中只有一个Vue实例，并且会配合组件一起使用
4、{{}}中要写js表达式，它会自动读取到data中的所有属性
v-bind: 可以简写为 :
指令语法
1、写在标签体内部，用于解析标签的属性，内容，事件
数据绑定
1、单向绑定（v-bind）：数据只能从data流向页面
2、双向绑定（v-model）：数据不仅可以从data流向页面，也可以从页面流向data
备注：双向绑定一般应用于表单控件中
v-model:value可以简写为v-model
el的两种语法
1、new Vue的时候配置el属性
2、在Vue实例中调用$mount("")，指定元素
data的两种语法
1、对象式，data作为属性，值是一个对象
2、函数式，data作为属性，值是一个函数
没有用到组件的时候两种都可以，如果用了组件，就只能用函数式，否则会报错。
MVVM模型
M - Model，对应data中的数据
V - View，对应模板，el指定的容器
VM - ViewModel，对应Vue实例对象，起到双向绑定的作用
事件处理
1、使用v-on:xxx或@xxx，xxx是事件名
2、在methods配置的函数是Vue所管理的，所以this指向的是实例对象
3、@click和@click($event)是同一个意思，如果要传递自定义的参数，又想使用event对象，可以这样写
事件修饰符
在事件的后面使用点语法，并带上特定的字符串，可以让事件更具多样化。
常用的几个：
1、prevent，阻止事件的默认行为，等同于在事件中使用了event.preventDefault();
2、stop，阻止事件的冒泡，等同于在事件中使用了event.stopPropagation();
3、once，让事件只触发一次，等同于记录了触发次数并在调用前比较了下
键盘事件
为了便于操作，有时候软件需要绑定常用的键盘事件，辅助输入，Vue也做了相应的事情
1、Vue中常用事件的别名：
回车 -> enter；
删除 -> delete；
退出 -> esc；
空格 -> space；
换行 -> tab（特殊，需要配合keydown使用）
2、未提供的别名，可以使用原始的key值绑定，但要写成短横线命名的方式。
3、系统修饰键，ctrl，alt，shift，win在keydown和keyup事件里表现形式不同，在keyup中需按下系统键+其他键，才能触发；在keydown事件中，只需按下系统键就会触发。
4、也可以使用keycode去绑定键盘按键，但不推荐，因为这种方式已经被官方废弃，而且不同的键盘的按键的keycode还不统一。
计算属性
它是通过已有的属性计算得来
底层原理是借助了Object.definepreperty方法提供的getter和setter
get函数什么时候执行？
1、初次加载时执行
2、当依赖的属性发生改变时，重新执行
计算属性与methods相比，由于有缓存机制所以效率更高，多次调用同一个计算属性只执行一次，多次调用同一个methods会计算多次。
如果计算属性要被修改，还需要定义set函数，在set中去修改依赖的属性。
监视属性watch
1、当监视的属性的值发生变化时，它的回调函数立即被调用
2、监视的属性必须存在
3、监视的两种写法：（1）在配置属性中带入watch配置 （2）通过vue的实例调用$watch函数
在watch中配置immediate为true，页面初始化时立即监视。
深度监视
如果需要监视多层级的数据，需要用到深度监视，使用方法是在监视属性中配置deep属性。
计算属性与监视属性的区别
1、computed能完成的功能，watch都可以完成
2、watch能完成的功能，computed不一定能完成，比如watch可以进行异步操作，因为它没有返回值
两个关于函数声明的小原则
1、所有被vue管理的函数，最好写成普通函数，因为这样写this是vue实例或组件实例
2、所有不被vue管理的函数（例如：定时器回调函数，ajax回调函数），最好写成箭头函数，这样写的this是vue实例或组件实例。
绑定样式
绑定class样式的三种写法
写法:class=xxx，xxx可以是字符串，数组，对象
1、字符串写法，适用于类名不确定，需要动态指定
2、数组写法，适用于类型数量不确定，名字也不确定
3、对象写法，适用于数量确定，名字确定，但要动态指定用不用
style样式
:style="{fontSize:xxx}"，xxx是动态值。
:style="[a, b]", a和b是样式对象。
条件渲染
有两种方式进行条件渲染：v-show和v-if
使用v-show时，未显示的元素仍然会显示在页面上，只不过display的样式被设置为none，所以在需要频繁切换元素的场景下效率更高。
而使用v-if时，未显示的元素压根不会显示在页面上，但它的优势在于可以配合使用v-else-if，v-else进行比较复杂的逻辑判断，需要注意的是，在使用它们的时候不能被“打断”，否则会出错。
列表渲染
列表渲染使用v-for指令，在需要列表展示的元素上写元素，语法如下：v-for="(item, index) in list" :key=xxx。
它可以遍历：数组，对象，字符串（用的少），指定次数（用的少）
在实际开发中，应使用唯一标示来修饰key，否则在逆序添加，删除等破坏顺序的操作后会引起显示的问题。
收集表单数据
当控件为输入框时，v-model收集的就是value值，不用额外操作。
当控件为单选框时，v-model收集的还是value值，但需要给每个单选框配置value值。
当控件为多选框时，v-model收集的还是value值，不但要给每个多选框配置value值，还需要将data中的承载数据的值的类型设置为数组。（除非是只有一个多选框，这样就不用配置，因为只需要收集true或false，这是它的默认行为）
v-model还有三个点语法的修饰符：
v-model.number：自动进行数值转换
v-model.lazy：延迟数据的收集，在输入时就会发起网络请求的场景会有点用
v-model.trim：自动进行删除前后空格
过滤器
对要显示的数据进行格式化的处理，它适用于一些简单的逻辑。
语法：
1、注册过滤器有两种形式，第一种是局部过滤器，只能在当前Vue实例中使用，格式为：
new Vue({
filters:{
filterName(value){}
}
})
还有一种是全局过滤器，可以在其他的Vue实例中使用，格式为：
Vue.filter("filterName", function(value){
});
2、使用过滤器，语法为：{{ target | filterName }}，这种用的比较多，还有一种是在v-bind中使用：:x = "target | filterName"
备注：多个过滤器可以并联使用。
内置指令
v-text指令
它的作用是往控件中填充文本。
与插值语法不同的是，它会完全替换文本的内容，插值语法则不会，所以插值语法更加灵活。
v-html指令
它的作用是往控件中填充html内容。
由于可以填充html所以存在安全性问题，容易导致XSS攻击。
不要在用户可以输入的地方使用它。
v-cloak指令
这个指令没有值，它的作用是在网络条件不佳的情况下，不显示让用户摸不着头脑的插值语法。所以用于优化性能。
v-once指令
这个指令也没有值，它的作用是让加载的内容只初始化一次，避免每次都更新它。
v-pre指令
添加了该指令的标签会跳过Vue的编译过程。
可利用它跳过没有插值语法，没有指令语法的节点，加快编译速度。
生命周期
它又称为，生命周期回调函数，生命周期函数，生命周期钩子。
函数名不可更改，可以在里面写业务逻辑。
函数内部的this指向vm实例对象或组件实例对象。
目前学到了8个，4对生命周期钩子，分别是：创建前和已创建，挂载前和已挂载，更新前和已更新，销毁前和已销毁。
常用的生命周期钩子：
1、mounted：发送ajax请求，订阅消息，启动定时器，绑定自定义事件等初始化操作
2、beforeDestroy：在销毁前，应清除定时器，解绑自定义事件，取消消息订阅
关于销毁Vue实例
销毁后自定义事件会失效，但是绑定的DOM事件不会失效。
在beforeDestroy中对数据的操作是无效的，因为不会再触发更新流程了。
组件
非单文件组件
使用组件的步骤：1、创建组件 2、注册组件 3、使用组件
1、如何创建组件
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的参数几乎一致，区别如下：
- 无需使用el指定容器id
- data必须写成函数，因为写成函数后再被复用就不会出现重复引用的问题
备注：在声明组件的配置属性中使用template配置组件的结构。
2、如何注册组件
有两种方式，局部和全局的
局部的方式：在new Vue()中传递components选项
全局的方式：Vue.component('组件名', 组件)
3、如何使用组件
在html的容器中，编写<组件名></组件名>标签即可
一些细节
1、组件名
一个单词组成：
第一种写法（首字母小写）：school
第二种写法（首字母大写）：School
多个单词组成：
第一种写法（带横杠）：my-school
第二种写法（大驼峰）：MySchool（需要Vue脚手架支持）
备注：
可以在配置项中使用name属性去定义开发者工具中的组件名
2、关于组件标签
第一种写法：<school></school>
第二种写法：<school/>
备注：如果没有使用脚手架工具，第二种写法只会渲染一次
3、简写
const school = Vue.extend(options);
可以简写成
const school = options;
在开发中简写方式更常用哦。
模块化
// 模块化的三种方式// 1、分别暴露export const school = Vue.extend({});// 2、统一暴露const school2 = Vue.extend({})export {school2}// 3、默认暴露const school3 = Vue.extend({})export default school3// 使用默认暴露时有一个优势，在引入时可以简写import XXX from "xxx"// 使用分别暴露和统一暴露时，需要这样写import {xxx} from "xxx"// 由于Vue.extend可以省略，可以直接写配置对象，所以就变成了上述的形式，这里使用了默认暴露的形式export default({name:"School",data(){return {schoolName: "北京大学",schoolAddress: "北京市海淀区"}}});创建脚手架
1、配置下载镜像为淘宝的：npm config set registry https://registry.npm.taobao.org
如下系统提示证书过期，还需要执行以下命令，取消SSL认证，npm config set strict-ssl false
2、安装脚手架Vue-Cli，输入命令：npm install -g @vue/cli
3、安装完成后，创建项目，vue create 项目名
4、启动项目，在创建项目时，脚手架会默认带入一个Hello Wrold界面，启动服务：npm run serve，编译完成后会返回地址。
ref属性
1、用来给HTML元素或子组件打标签
2、在获取它们的时候，HTML元素返回DOM，子组件返回实例对象（VC）
3、使用方式：
打标签：<h2 ref="xxx">Hello World</h2>
<School ref="yyy"></School>
获取：this.$refs.xxx或this.$refs.yyy
props配置项
它的工作是将值传给子组件，在开发中也是很常用的。
1、传递数据，定义一个key和value
<Student name="张三"></Student>
如果需要传递数值类型，可以这样写：<Student :age="18"></Student>，在age前面加一个冒号，表示里面的值是一个表达式
2、子组件接收数据
它有三种方式接收数据（以下都是在配置项中定义的），第一种：
props:["name"]
第二种：props:{
// 限制类型
name:String
}
第三种：props:{
name:{
// 限制类型，是否必填，默认值
type:String,
required:true,
default:""
}
}
备注：props是只读的，如果对它进行修改会警告，如果业务需求是得进行修改的，可以在data中定义一个MyName属性，值为name，以后的修改都在MyName中进行就可以。
Scoped样式
作用：让组件的样式局部生效，避免重名带来的冲突
写法：<style scoped></style>