weixin_52618349的博客

这次是我们vue3尚硅谷视频的最后一次笔记，未来如果vue新的视频出来，可能我也会再进行查缺补漏。Vue3中的其他改变还有一些细枝末节的地方，大家可以看官方文档去进行学习。...

provide与inject现在我们每个组件都是一个颜色背景，所以我们现在想做一个套娃的效果：我们在父组件中引用子组件：然后同理我们在子组件中去引用孙组件：我们先来看看我们的页面是什么样的：我们现在想做的是父组件中的数据向孙组件中进行这样的隔代传值的功能。首先我们先给父组件加上数据：我们传数据就用provide。我们想得到别人给我们传来的数据就使用inject。我们只需要添加provide属性，只要加了这个，所有的后代组...

customRef作用：创建一个自定义的ref,并对其依赖项跟踪和更新触发进行显示控制。我们这里是使用的vue内置的ref，我们现在不这么去做，去使用我们程序员自己写的ref:我们的ref就是一个容器，所以我们的myRef也可以理解一个容器，去存放数据，只不过myRef只不过是借助函数来实现的。可以这么去理解：可以成功获取数据。但是我们的自定义ref也不是所有的东西都自己去写，我们就会引用vue给我们提供的customRef:我们为什么读取了两次信息，...

toRaw与markRaw我们可以打印出我们原始的数据。这个用的时候相对比较少。我们用toRaw方法后，我们的数据已经不是响应式数据了，所以就不会有页面渲染的功能了。那我们这个方法能用在ref封装的数据上么？我们可以通过控制台看到我们的toRaw方法只能针对于reactive方法使用，对于ref无效。我们对代码进行改动，添加一个按钮：页面出现警告信息，是因为我们的setup只执行一次，在toRefs(person)时...

toRef与toRefs我们使用toRef可以把数据转成字符串，我们的传值时就可以简单点了。而且我们可以看到如果我们直接调用属性赋值是一个字符串类型，但是我们使用toRef是先把数据变成响应式类型，可以实现页面的渲染。我们可能会说既然是获取单个属性，是不是也可以使用ref啊，这个toRef还有学的必要么：我们发现如果是使用ref，我们就算是更改了很多的属性和数据，我们更改的并不是原数据，而是更改的我们新创建的各个数据。但是如果我们使用to.

它是一个打包工具，可以把多个静态资源文件打包成一个文件。第一步安装webpack打包工具：我们先用vscode打开空文件夹，然后保存工作区，打开工作区。新建一个文件夹，然后初始化。然后我们去下载webpack:然后如果下载完了我们可以查看版本号：如果下载成功了，但是查看不了版本号需要修改下面的配置：第二步创建js文件用于打包操作：我们再创建一个js文件：我们再创建一个文件然后引入这两个文件：第三步创建webpack配置文...

自定义hook现在我们想当我们鼠标点击浏览器页面时，能把鼠标点击的坐标位置显示到页面上，我们来处理一下：我们先给出坐标属性。我们这里使用onmounted方法，因为我们以挂载完毕就要获取坐标：我们现在能获得鼠标坐标，我们就要去将它复制给我们定义的在页面显示的x,y属性：但是我们这个功能当我们的Demo组件关闭时应该就不要再起作用了，所以我们最好还是要给它加一个卸载前起作用的钩子函数：我们将功能封装到一个方法里，然后在两个钩子函...

watch监视ref定义的数据先写一个简单的例子：我们现在使用一下watch属性：我们可以使用watch的完整写法，可以使用一些属性和方法：可以看到我们可以使用一开始就先开启监听，或者也可以开启深度监听。这些都是我们vue2中的监听写法，现在我们来学习一下vue3中的监听写法：我们是监视了ref的1个属性。现在我们来看看监视ref的多个属性应该怎么做呢？我们可以针对每一个属性写一个监视配置项，但是比较麻烦，我们vue3也给出了推荐的写法：...

computed计算属性我们现在使用一下计算属性：但是这里我们既用vue2的计算属性又用vue3的setup函数，还是会让人觉得很奇怪的。所以这里我们使用vue3的计算属性：我们还可以改一下：返回值我只传person:这样写也是可以的：这是一种简写形式。当然也可以写完整用第二种方式：...

回顾Vue2的响应式原理写一个简单的例子说明问题。我们现在去添加一个原来person没有的属性或者删除一个属性：添加失败。但是vue2也给我们添加的办法了：也可以用引用Vue的方法：删除也是同理：页面同样不能渲染，我们还是要去使用$方法：现在我们去添加点数组：现在我们去修改数组中的第一个元素值：这样写是无效的，想要成功更改我们还是需要使用$set方法：...

ref函数_处理对象类型我们现在想改改工作种类和薪水：按照之前的写法，我们通过打印输出，可以看到我们的job.value中的type和salary已经是我们给的值了。那我们就可以直接进行更改了：reactive函数我们通过笔记可以看到它不支持基本数据类型，我们写一个看看：看到已经报错了。接下来我们使用它去定义对象类型：我们使用这个函数，并且打印一下对象job：可以看到此时的job是一个响应式...

初识setup跟着笔记第一步，我们先去创建一下setup函数:在vue2中我们是把数据写在data里，把函数写在methods里，现在我们都不用了，我们就把这些都写在setup里。所以我们现在在这个里面给它加上数据和方法：接下来我们来说我们setup的返回值：先说返回一个对象：因为数据和方法都是在setup中写，我们就不需要调用数据时写this了。然后现在看着笔记我们来学第二种返回值情况：我们这种返回函数的形式，有两个return，一个是返...

Vue3使用vue-cli创建工程先要去查看我们的版本，一定要高于4.5.0才可以，我的是4.5.15.所以可以做vue3.我们去选择vue3版本就可以了。这就是下载完了。我们输入这两句 看看能不能运行起来：ok了。打开的页面和vue2差不多，但是我们发现我们的开发者工具灭了，这是因为我们安装的是vue2的开发者工具而不是3的。使用vite创建工程我们按照它的提示去执行就可以了：我们运行的时候用npm run d...

element-ui基本使用这是Vue2的最后一章了。我们去看官网使用就可以了。第一步是要安装element-ui:安装之后，我们先来写个比较简单的案例：我们现在需要去引入并使用element-ui:想用什么直接找到代码复制粘贴就可以了：它还给我们提供了日历：我们这里没有数据，不需要v-model双向绑定：我们想使用哪个去找就可以了。这部分也不需要太去细学习，这部分会在项目实战中被大量的使用。...

两个新的生命周期我们把之前的完整代码先放在这里，之后会在这个基础上更改：我们之前是做了缓存处理：如果我们想要缓存多个组件呢？用这种数组的形式。这是上次笔记我遗留了的一个问题。然后我们就来学习两个生命周期这部分的知识：我们现在加了定时器以及销毁定时器的代码，在前端页面去运行一下：即使我们切到别的页面也没有停止定时器，这是因为我们给News做了缓存，但是这样很不合理，我们又不能去掉缓存，因为如果去掉缓存的话，我们之前让输

编程式路由导航我们这部分就是我们仍然想做路由跳转，但是我们还不想使用router-link，为什么有这样的需求呢，是因为我们之前使用router-link都是使用a标签跳转的，我们现在想使用button按钮，这时候就不能再使用router-link了。先把之前的代码放上来，之后我就不放完整截图了，只放修改的部分：现在我们对它的功能进行一个升级。我们给它添加一个按钮：我们有了button按钮，就可...

路由的几个注意点这里还是用之前的代码先放上来：打开的浏览器页面：我们现在把上方头的位置也给它做成组件的形式：我们页面的效果是不变的。我们的这个Banner是一般组件，我们的Home和Person为路由组件。我们一般把路由组件放到pages文件夹里，把一般组件放在components文件夹里。我们不用的路由组件其实是被销毁了。总结:1.路由组件通常存放在pages文件夹,一般组件通常存放在components...

路由基本使用我们先写个大框，样式是用的bootstrap,大家可以用别的或者不写。main.js:App.vue:我们去写两个组件about和home:既然要用到路由，我们就按照老的套路肯定先要用npm去下载：然后当然就要在main.js中去引用:但是这部分引用之前我们要去创建一个路由文件：这个写完就可以引入到main.js中了：我们的路由器已经就位了，我们就要想办法去使用我们的路由器：页面效果：我们最基...

我们的vuex补充一个写法，还是上一课的代码：可以这样把很长的业务逻辑分块去写。getters配置项 这个不是必须的东西，只是有些情景适合使用。我们添加一个需求:在标记的区域加一个扩大10倍的功能，就会引出这个配置项.我们当然可以直接写：但是有些程序员会给state中的数据写一些非常复杂的计算式，然后这个还经常被使用，就最好去在某处写好，以后调用就可以了，当然我们首先会想到的是我们的计算属性。这肯定是可以完成我们的要求的。我们这个可以在当前...

搭建Vuex环境先去安装vuex。我们安装好了就要去使用它，同样我们是在main.js中去配置：我们这里的store是相当于一个管理者，它会去管理vuex身上的很多组成部分。我们的store中要去管理者三个部分以及画圈的两个api。我们既然使用了store，就要去配置它，我们用官方的方法在src下新建文件夹store在文件夹中新建index.js文件，在里面去写配置内容：我们就配置完了。我们现在创建 完了store那我们就可以去在main.js里引入我们这个...

默认插槽这是我们利用之前学过的知识做的案例，现在我们需要来改个需求了，就是说我们的美食和电影部分我们不要去做这种了，我们只显示一个图片。虽然这么改也是可以成功的，但是我们如果还想改电影，还有重复这段代码，并且如果业务逻辑不同，这么写也是会比较麻烦的。这就需要使用我们的默认插槽:具名插槽我们再新学一个插槽的形式：这样我们可以想让哪个内容放到哪个插槽都可以。作用域插槽这部分我们就去简化代码了：...

动画效果其实现在我们已经能看到隐藏和显示的效果了，我们点击一下按钮：但是现在没有动画效果，我们就来学习一下vue给我们提供的动画效果。我们先要写一些我们的css样式:但是我们在vue中来和去不能叫这么简单的go和come，它有它自己的命名规范:现在我们有了我们自己的来和去的样式以及动画样式，我们 还需要把它们包起来：现在我们就有了滚动的效果了。隐藏就向左划走。显示再由左向右划来。如果我们给了transition一个name属性的话，我们的来..

全局事件总线1它可以完成任意组件之间的通信。原理图:现在我们使用事件总线的方式去把各个组件之间实现通信：在main中如果使用windos对象去传递信息，肯定是所有组件都可以收的到的：在两个组件分别去使用钩子函数去接收window给我们的东西，我们就能接收的到。我们原理图中的x就是要所有人都能看的到.但是既然我们使用了框架，我们就不会去使用window对象了。我们可能会想到vc的原型对象Vuecomponent，因为所有的vc都是它n...

组件自定义事件_绑定修改一下school组件的style:再给student组件添加一个样式:再给app一个样式:最终页面效果：我们现在想做的是，子组件给父组件传递信息：在父组件中先定义一个函数:然后在子组件去接收：现在我们想完成同样的需求，我们把子组件的名称也传给父组件，但是我们不用之前那种方法，我们使用自定义组件的方法：这种方式也可以完成子给父传递信息。我们可以通过这...

浏览器本地存储我们去给本地添加数据。这样我们就向本地添加了一个数据。key和value都是字符串类型。如果我们存的数据是整型：如果我们存的是对象：我们无法看到对象的内容。只要我们的value类型不是字符串类型，它一定会给我们调用toString()类型的。我们可以调用json方法去把它转成字符串类型：我们除了添加数据还能读取数据：如果我们想读取对象值：如果想读的明白一点也...

创建Vue脚手架我们先需要下载npm和node.js。1.我们先配置npm淘宝镜像，不然以后可能会下载的特别的慢：之后我们需要进行全局安装vue的cli脚手架:然后我们再去在cmd输入vue:这就证明我们安装好了。我们这个一定要在c盘安装，全局的。然后创建的是去d盘一个自己创建的目录就好了:我们选择vue2就可以了：出现successfully就可以了我们进去执行指令:我们打开第一个网址：这样我们就创建好了我们的第一个脚手架..

对组件的理解非单文件组件定义：一个文件中包含有多个组件单文件组件：一个文件中只包含有一个组件。我们先写一个简单的例子，我们不用组件的话：我们页面中的这两个部分我们就可以分成两个组件来写。用组件改写后：前端页面效果是和之前一样的：如果我们想添加一些新的功能就可以直接在对应的组件的模板上去写就可以了：我们直接在组件的模板中加入button元素就可以了，然后加上正常的方法：我们可以在多个div中去使用多个组件（不同的vm对象中可...

过滤器我们先去这个网站复制这个days.js的连接。我们把它存到我们的电脑中去。把它复制粘贴到我们的路径下，我们就可以去使用了。在Bootcdn网站上或者github里有教我们使用，但是有时候网络不好，访问不到。我们想学的时候可以去官网看看。我们去显示我们的一个时间戳：我们现在要去把时间戳格式化成我们能看懂的时间，我们利用计算属性也是可以的：我们这里就是定义了一个计算属性中的方法，返回了一个刚刚引入的day.js中的格式化方法：我们还可...

Vue检测数据的原理_数组我们这次是想研究检测数组的原理，所以我们就是要给它添加一个简单的数组hobby。先看看前端的运行效果：我们在前端控制台去查看时，我们发现我们无法找到对数组中的元素进行的set和get方法。所以我们的vue肯定是检测不到的。我们在前端控制台更改了信息，但是我们的vue不认。这也就回到了昨天我们遇到的那个监视的一个问题了。如果我们想做到数组的更改，我们就需要使用数组自身的一些方法：比如我们想给数组后面添加一个值就要使用push方法：...

key作用与原理我们想给已有的数组去添加一个内容：点击按钮：现在老看好像没有任何的问题。但是我们为了具体说key的问题，我们必须得弄出点错误才好去说明。我们去添加了一个输入框。我们去给它输入点信息：这时候我们去点击按钮：这时候我们就能发现不对劲的地方了。数据每个都串了一个。那我们key不用Index使用p.id呢？没有出现任何的问题。如果我们不写key会出之前一样的问题。尚硅谷视频中老师的一个流程图...

绑定Class样式我们写了很多class样式，我们通过vue的绑定方式可以动态去修改样式：当我们点击时：但是这样是我们在方法中写死了，我们想做的是在三种样式中随机出现。我们需要在方法中进行修改就可以了，采用数组的形式，对下标进行随机数向下取整（0 1 2），然后改变mood值，这样就可以随机产生样式了。我们使用这种方式可以同时引用多个样式，数组形式。还有第三种绑定形式：我们也可以不用这种对象也可以做判断：但是我...

计算属性我们还是去做上一个拼接姓名的姓名案例：我们使用get方法可以通过this取到我们的data里面的属性进行计算。但是每次取值都会调用我们的get，大大增大了我们缓存的负担。那我们什么时候会使用这个get方法呢：1.初次读取fullName时2.所依赖的数据发生变化时我们的之前的methods方法只会被调用一次缓存。这是和我们的计算属性的区别。我们的data和methods中的内容都是我们vm的属性可以vm.去调用。但是我们的计算属性就不能这么去调用。它会自己调用自.

键盘事件鼠标放上去按回车就好使。我们Vue中有九大常见的键盘事件的别名：回车==>enter删除==>delete退出==>esc空格==>space换行==>tab上==>up下==>down左==>left右==>right我们只需要把别名放上去就可以了，不一一演示了。接下来我们来说这9大别名以外的按键应该怎么用呢？我们比如说CopsLock这个按键，它有两个大写字母，是由两个单词组成.

我们先要有node.js,npm,vue这些环境。之后我们就可以去操作了：我们先要去下载这个vue-cli的全局依赖。我们在我们创建的一个文件夹的位置去打开cmd，这个文件夹就是用来存放我们以后创建的vue项目的。我们先这样去创建一个内置的利用webpack生成的Vue项目，webpack后面的是我们给项目起的名称。这个命令我们要记下来。我们加载完之后，会让我们填写一系列的信息，首先是让我们去填写项目的名称。接下来是要我们去写一个项目描述。接下来要我们...

工具：hbuilderx建立空项目：在终端输入指令：这样就会生成一个json文件：这一块相当于一个前端模块化的配置文件。接下来我们要做一些常见的npm指令:我们会使用npm去下载很多的文件，比如我们可以去下载javascript,jquery等：npm install 文件类型名 -S我们就多了一个这个文件。我们可以看到这里有一个dependenices依赖，我们这样就导入了jquery依赖，我们的项目中就可以去使用jquery了。...

事件修饰符写一个简单的vue实例：点击弹窗按钮：我们点击弹窗后就进入到这个页面了。但是我们现在不想点击弹窗进入这个页面，我们就要做一些修改。我们要去阻止这种默认功能的发生。再去运行：这样我们去点击按钮就不会发生跳转。我们也可以不用去亲自去写这个阻止事件。在click后去加也可以：这个prevent就是事件修饰符，是我们click事件的修饰符。vue一共给了我们6个事件修饰符，前三个常用后三个不常用。vue中的事件修饰符：...

事件处理先写一个vue实例：运行：我们现在来写一个功能，就是左侧有一个按钮，点击之后就出现弹窗，弹窗内容显示你好同学之类的语句，我们 来写一下：我们能想到我们可以使用v-on:click指令 鼠标点击上 就返回一个函数方法，然后我们再去写一个函数方法，这样的思维。我们去运行一下：控制台报错说我们没有定义这个方法。显然我们这么写是不行的。原因是：我们红色框中的是vue模板，绿色框内的是vue实例，我们vue模板里使用的东西在vue实例里必须是存在的。所以..

理解数据代理我们可以把obj的x属性绑定到obj2上 obj2可以获取和修改obj的x属性我们以前可以通过obj去操作x，现在我们也可以通过obj2来操作x。Vue中的数据代理我们先去写一个简单的vue实例：运行一下：我们在获取这两个属性的时候，是通过getter方法从外部去获取。我们修改的时候，是通过setter方法修改外部的一个值。所以我们说这是一种代理模式。我们改变data里的值就随之改变了页面显示的name和address的值...

el与data的两种写法el的两种写法：之前的写法（第一种写法）：我们把el注释掉：我们看到了我们的vue对象，其中前面带$符号开头的方法，都是我们可以使用的。我们这里要用的是$mount()方法。第二种写法：通过结果，我们发现我们用v.mount()可以代替el完成同样的效果。先等1秒钟之后，再绑定vue实例：运行的时候：1秒钟之后：data的两种写法：第一种写法：第二种写法：运行结果：...

容器和Vue实例不存在多对一的关系。当然容器和Vue实例也不存在一对多的情况容器和Vue实例是一一对应的。注意区分js表达式和js代码（语句）1.表达式：一个表达式会生成一个值，可以放在任何一个需要值地方（1）a(2)a+b(3)demo(1)(4)x===y?'a':'b'2.js代码（语句）...