Vue 2.0和3.0笔记

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>