Vue 自学笔记

Posted 2023-04-17

参考技术A 这篇笔记用于自己复习，知识点很散，不适合别人看

应用实例 const app = Vue.createApp(RootOption)

根组件选项 const RootOption =
根组件实例 vm = app.mount('#app')

组件选项：与根组件的配置选项相同
组件实例：每个组件都有一个组件实例，vm 通常代表组件实例

将 provide/inject 看做是长距离的 props
默认情况下，provide/inject 绑定并不是响应式的

单向下行绑定，父组件中更新 props 属性值，则子组件中的值自动更新，然后自动更新视图
不要在子组件中更改 props 属性值
prop 会在一个组件实例创建之前进行验证，所以实例的 property (如 data、computed 等) 在 default 或 validator 函数中是不可用的
当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

data 是个函数，返回一个对象，该对象作为 vm. data.count 一样，可读写
vm.foo 动态添加的属性不具备响应式，该属性也不会保存在 vm. data.foo undefined
相同组件的多个实例拥有各自不同的 $data 属性，类似对象的实例属性

依赖的 data 发生更新，则 computed 自动更新，对应的视图自动更新

computed vs watch

这两个都可以根据一个属性的变化来改变另一个属性，大多数需要用到 computed，因为他可以缓存。
只有在某个属性改变之后需要进行异步操作或者开销较大的复杂操作的时候，需要使用 watch

可以将 methods 方法作为事件的处理函数 v-on:click="increment"
可以从模板中直接调用 methods 中定义的方法 v-bind:title="getTitle()" getMessage()
从模板中调用方法，如果方法访问了任何响应式数据，则将其作为渲染依赖项进行跟踪
从模板调用的方法不应该有任何副作用，比如更改数据或触发异步进程
methods 中的方法被相同组件的多个实例共享，类似对象的原型方法

beforeCreated：已经通过 vm.$on() 为组件监听了所有事件，包括生命周期钩子
created：可以访问组件的所有注入属性以及响应式属性
beforeMounted: 已经将组件的模板字符串编译成了 render() 函数。
mounted: 组件的模板已经生成 DOM 并且插入到文档中了。
beforeUpdated: 响应式 data 已经发生了变化
updated: 组件的 DOM 视图已经发生了改变
beforeUnmounted: 已经调用了 vm.unmount()
unmounted: 组件 DOM 结构已经从文档中删除，组件响应式数据已经删除，组件事件监听器已经删除

不管是哪种属性，都能够在该组件作用域的模板中直接访问

vm.count

vm. attr
vm. on

vm 实例创建之后动态添加的属性不能够响应式

vm.foo = 100
vm.$data.foo //undefined

app.component('my-component', )


component:
'my-component':



自定义特性
class
style
事件

都会传递到子组件的根元素上，class style 与根元素的原有 class style 合并到一起。
如果子组件根元素不支持该事件，则无事发生 element.addEventListener('no-suposed-event', function () )，则不会触发任何监听器。

通过 inheritAttrs: false 配合 v-bind=" attrs 包括 html特性、class、style、事件，与 vue2 不同，vue3 listens 属性了

emits: ['myEvent', 'click']

当在 emits 选项中定义了原生事件 (如 click) 时，将使用组件中的自定义事件替代原生事件侦听器。
凡是在子组件中 $emit() 的事件，最好在 emits 属性定义该事件

props属性验证失败，在开发模式下，只是在浏览器控制台警告，不影响程序执行
自定义事件的验证如果失败，在开发模式下，只是在浏览器控制台警告，不影响程序执行，不影响发送事件以及处理事件

默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件

<MyComponent v-model="user"></MyComponent>
<MyComponent :modelValue="user" @update:modelValue="user=$event"></MyComponent>

可以给 v-model 添加参数，来改变默认值，使用 person 作为 prop，使用 update:person 作为事件

<MyComponent v-model:person="user"></MyComponent>
<MyComponent :person="user" @update:person="user=$event"></MyComponent>

<input ref="foo">
<my-component ref="bar"></my-component>

this. refs.bar 指向子组件实例

router-link 和 router-view 可以放在任何组件的任何位置，不是非要放在根组件里面，这两个甚至可以分开放在不同组件里。

router-link 本质上就是渲染 a 标签，放在哪个组件里都可以
router-view 就是渲染与 path 对应的组件，在哪渲染都可以

routes 是一个数组，每个元素是一个路由记录 RouteRecord 对象，定义路由与组件的映射关系

router 实例，定义了路由的方法

router 同时还是个插件，app.use(router) 可以插入全局实例属性 this. router

vue-router 最核心的工作就是编写 routes 映射关系

URL:

顶级 <router-view> 匹配顶层 path 渲染，
组件 User 中的 <router-view> 匹配 User Route 的 children 中的 path 渲染

一个路由映射一组组件 path: '', components:

为一个匹配路径提供多个 <router-view>，来渲染多个组件，通过 <router-view name=""> name 属性来指定对应的 <router-view> 应该渲染哪个组件

如果路由有参数，绝对路径的别名必须带着参数

username 取代 $route.params.username
path: '/user/:username', component: User, props: true

props 为 true，route.params 将被设置为组件 User 的 props
props 可以是对象 title: 'hello', id: 20 ，传递静态 props 给组件 User

path: '', component: , meta: foo: 100, bar: 'hello'

to.meta
to.matched.some(record => record.meta.foo === 100)

导航完成后，在组件的 created 钩子函数中从服务器获取数据
导航完成前，在组件的 beforeRouteEnter 导航守卫中从服务器获取数据

<Transition> 是一个内置组件，这意味着它在任意别的组件中都可以被使用，无需注册。
<Transition> 仅支持单个元素或组件作为其插槽内容。如果内容是一个组件，这个组件必须仅有一个根元素。
在位于 <Transition></Transition> 之间的单个元素或组件进入或者离开 DOM 时候，会为该元素或组件应用动画

进入或离开可以由以下的条件之一触发：

当一个 <Transition> 组件中的元素被插入或移除时，会发生下面这些事情：

.v-enter-from
.v-enter-active
.v-enter-to

.v-leave-from
.v-leave-active
.v-leave-to

<Transition name="fade"></Transition>

.fade-enter-actvie
.fade-leave-active
...

可以配合 Animate.css 使用

.v-enter-active
transition: all 0.3s ease-out;

.v-leave-active
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);


.v-enter-from,
.v-leave-to
transform: translateX(20px);
opacity: 0;


.v-enter-active
animation: bounce-in 0.5s;

.v-leave-active
animation: bounce-in 0.5s reverse;


@keyframes bounce-in
0%
transform: scale(0);

50%
transform: scale(1.25);

100%
transform: scale(1);



<Transition> 组件会通过监听过渡根元素上的第一个 transitionend 或者 animationend 事件来尝试自动判断过渡何时结束。如果根元素上同时使用了 css 过渡和 css 动画，则通过 type 指定监听哪个事件。duration 属性可以显式指定过渡的持续时间 (以毫秒为单位)，而不是通过监听 transitionend 或者 animationend 来决定过渡何时结束。

多用 transform 和 opacity，不要使用 margin height 这类会影响 CSS 布局导致 DOM 重绘的属性。

对 <Transition> 的 prop 的值进行动态绑定 <Transition :name="transitionName" :duration="transitionDuration">，根据当前组件的 data 的值来决定过渡行为

<TransitionGroup> 是一个内置组件，设计用于呈现一个列表中的元素或组件的插入、移除和顺序改变的动画效果。

.v-move
transition: all 0.5s ease;

Vue基础自学系列 | webpack中的插件

视频来源：B站《黑马程序员Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程》

一边学习一边整理老师的课程内容及试验笔记，并与大家分享，侵权即删，谢谢支持！

附上汇总贴：Vue基础自学系列 | 汇总_COCOgsta的博客-CSDN博客

---

1. webpack插件的作用

通过安装和配置第三方的插件，可以拓展webpack的能力，从而让webpack用起来更方便。最常用的webpack插件有如下两个：

1. webpack-dev-server

   1. 类似于node.js阶段用到的nodemon工具
   2. 每当修改了源代码，webpack会自动进行项目的打包和构建

1. html-webpack-plugin

   1. webpack中的HTML插件（类似于一个模板引擎插件）
   2. 可以通过此插件自定制index.html页面的内容

1. webpack-dev-server

webpack-dev-server可以让webpack监听项目源代码的变化，从而进行自动打包构建。

2.1 安装webpack-dev-server

运行如下的命令，即可在项目中安装此插件：

npm install webpack-dev-server@3.11.2 -D

2.2 配置webpack-dev-server

1. 修改packgage.json->scripts中的dev命令如下：

"scripts": 
  "dev": "webpack serve",  // scripts节点下的脚本，可以通过npm run执行

复制代码

1. 再次运行npm run dev命令，重新进行项目的打包

1. 在浏览器中访问http://localhost:8080地址，查看自动打包效果

注意：webpack-dev-server会启动一个实时打包的http服务器

2.3 打包生成的文件哪儿去了？

1. 不配置webpack-dev-server的情况下，webpack打包生成的文件，会存放到实际的物理磁盘上

   1. 严格遵守开发者在webpack.config.js中指定配置
   2. 根据output节点指定路径进行存放

1. 配置了webpack-dev-server之后，打包生成的文件存放到了内存中

   1. 不再根据output节点指定的路径，存放到实际的物理磁盘上
   2. 提高了实时打包输出的性能，因为内存比物理磁盘速度快很多

2.4 生成到内存中的文件该如何访问？

webpack-dev-server生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的。

• 可以直接用 / 表示项根目录，后面跟上要访问的文件名称，即可访问内存中的文件

• 例如 /bundle.js就表示要访问webpack-dev-server生成到内存中的bundle.js文件

1. html-webpack-plugin

html-webpack-plugin是webpack中的HTML插件，可以通过此插件自定制index.html页面的内容。

需求：通过html-webpack-plugin插件，将src目录下的index.html首页，复制到项目根目录中一份！

3.1 安装html-webpack-plugin

运行如下的命令，即可在项目中安装此插件：

npm install html-webpack-plugin@5.3.2 -D

3.2 配置html-webpack-plugin

// 1. 导入HTML插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')

// 2. 创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin(
  template: './src/index.html',  // 指定原文件的存放路径
  filename: './index.html',  // 指定生成的文件的存放路径
)

module.exports = 
  mode: 'development',
  plugins: [htmlPlugin],  // 3. 通过plugins节点，使htmlPlugin插件生效

复制代码

3.3 解惑html-webpack-plugin

1. 通过HTML插件复制到项目根目录中的index.html页面，也被放到了内存中

1. HTML插件在生成的index.html页面，自动注入了打包的bundle.js文件

1. devServer节点

在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多的配置，示例代码如下：

devServer: 
  open: true,  // 初次打包完成后，自动打开浏览器
  host: '127.0.0.1',  // 实时打包所使用的主机地址
  port: 80,  // 实时打包所使用的端口号

复制代码

注意：凡是修改了webpack.config.js配置文件，或修改了package.json配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效！

作者：热爱编程的通信人
链接：https://juejin.cn/post/7138029382592888863/
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。