# qianduan36_day7

**Repository Path**: js-class/qianduan36_day7

## Basic Information

- **Project Name**: qianduan36_day7
- **Description**: aaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbccccccccccccccccccc
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-10-26
- **Last Updated**: 2022-10-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# code7

1. 三个阶段 挂载 更新 销毁
2. 挂载阶段
   - beforeCreate vue 创建一个空的实例 数据、方法都没有准备好
   - created 数据 方法准备好了 但是视图还没有准备好 我们可以在这个时候发送 ajax
   - beforeMount vue 实例已经通过$el 找到视图，但是还没同步 编译已经做完了
   - mounted 数据和视图同步了 我们在这个时候可以操作 DOM
3. 更新阶段
   - beforeUpdate 数据是新的，但是我们拿到的视图还是旧的
   - updated 数据和视图重新同步了
4. 销毁阶段
   - beforeDestroy 在这个时候 vue 身上的数据方法 computed 全部还在，我们在这个时候可以清理一些定时器之类
   - destroyed

ajax 可以放在 created 也可以放在 mounted

我们如何才能在 created 中操作 DOM ---> 把操作 DOM 的代码放在 this.$nextTick 里面

11 个钩子函数

vue3 -> vue-router4
vue2 -> vue-router3

路由 本质:有了它之后,我们可以实现在浏览器地址栏输入不同的地址,回车一下可以看到不同的页面内容

我们前端后面学的框架(vue,react)这些都是用来做单页面应用程序(single page application 简称 spa)

多页面应用程序 我们传统的网页都是多页面应用程序 项目里面有一堆的 html 文件 缺点 多个页面头尾还侧边栏基本上是一样的,浪费流量 空白

路由 有了路由之后可以实现切换 在浏览器地址栏输入不同的 url,能得到不同的内容 (映射)
单页应用程序 只有一个 html 页面 切换是假的,是通过修改局部来实现切换 多页面应用程序切换是考虑的多个页面的切换 单页应用程序切换是靠的多个组件的切换

学习如何去使用路由(我们这个在学 vue 第一天的时候 只需要手写一次 后面就不用自己手写了)

在 vue 项目中的组件按功能分有两种:

1. 页面组件 - 页面展示 - 配合路由用 views 目录
2. 公共组件 - 展示数据/常用于复用 components 目录

登录 注册 这些属性页面组件
轮播\按钮组件 公共组件

切换:得有二个组件才能切换 路由组件和之前学的组件不一样

1. 安装 vue-router@3
2. 创建一个 views 目录
3. 创建 2 个页面组件 (MyLogin.vue MyInfo.vue)

yarn add vue-router@3

spa : 单页应用程序 就是一个 html 页面

配置路由的步骤

1. 要在 App.vue 中准备一个占位符内置组件 router-view
2. 准备二个以上的页面级组件
3. 打开 router/index.js 配置 routes 路由规则数组
4. 为了让用户操作方便 vue 提供了一个新的内置组件 router-link (to 属性指定去哪里)
   , 也可以不用 router-link,可以用编程式导航 this.$router.push('path')

写的时候注意事项

1. 不用写#号，但是写的时候是以/开头的
2. 重定向 redirect
3. \*号 404 路由

router 这个是 new 出来的 路由实例对象 只有一个 可以实现路由规则之间的切换 导航仪 可以实现路线的切换 router.push
route 指的是当前这个路由规则 有一堆 具体的哪一条路线 可以获取当前这一条路线上的参数 router.query.id

嵌套路由 父子路由 ：把两个页面组件一样的 UI 代码放在一级路由 二级路由只放不一样的地方 实现公共的 UI 代码复用

初始化阶段
beforeCreate
created
beforeMount
mounted

更新阶段
beforeUpdate
updated

销毁
beforeDestroy
destroyed

当组件配合 keep-alive 作缓存的时候,created beforeDestroy 就用不了,所以 keep-alive 又为我们提供了二个新的钩子
activated 激活钩子
deactivated 失活钩子 未激活钩子

什么是 vue:渐进式 mvvm 的框架
vue 的核心特点:数据驱动(数据响应式) 组件化

mvvm

1. mvvm 是由三个单词组成的 m(model) + v(view) + vm(viewmodel)
2. model 就是数据一般来自本地存储或 ajax view 就是视图就是 template 中的 html 代码 viewmodel 就是 vue 实例本身
3. 我们 mvvm 的特点就是不像以前写代码把代码写在一起,而是把代码分成三大块,其中 vm 这块不用程序员写,这个是框架本身在做的
4. vm 是一个桥梁,沟通 v 和 m,实现了 v 和 m 的分离,好处:代码好维护 开发效率高
5. mvvm 最大的特点就是不用操作 DOM 数据驱动

vue 脚手架

1. 安装方式 npm i @vue/cli -g (全局尽量不要用 yarn)
2. 它就是 webpack 封装
3. 我们之前 webpack 配置文件在 webpack.config.js,我们现在变了配置文件在 vue.config.js

项目打开方式

1. 项目名字尽量和变量的名字一样的,不能是中文的 不能有空格
2. vscode 只能打开一个项目

运行 vue 项目

1. 先看根目录有没有 node_modules,如果没有,就执行 yarn
2. 如果有,就直接运行 vue serve (在 package.json 中找一个 scripts)

.vue 组件规范

1. template 必须有一个根标签
2. 这个组件代码不能是空的,必须有内容的
3. css 这块有一个 scoped 如果不加,当前写的样式会影响其他组件,加了之后只会对当前组件有效果 (原理:利用的是属性选择器)

<style lang="less" scoped> --> yarn add less less-loader

组件的好处:
1. 便于维护 
2. 便于复用


插值表达式 

表达式

{{1+1}}
{{1}}
{{abc}}
{{fn()}}
{{true?2:1}}


为什么组件中的data必须是一个函数:
1. 不这样写会报错
2. 这样写可以保证多次调用同一个组件,数据是独立的 


props 默认值(对象或数组)


$event
1. 在标签上,这个代表事件对象
2. 在组件上,这个代表的子组件传过来的值

修饰符
1. 事件修饰符 stop prevent 
2. 按键修饰符 enter esc 

v-text 和插值表达式作用一样
v-html 当ajax拿回来的不是纯文本,而是一块html片段 


v-show vs v-if 
1. 从原理:v-show利用display:none来实现 v-if通过创建和
2. 从使用场景:频繁切换用v-show 切换次数少用v-if

v-if,v-else,v-else-if 

表格的时候 


v-model 
1. 只能用于表单元素 input,textarea,select,复选框 单选框
2. 唯一一个可以实现双向数据绑定的指令 
3. 只要看到表单元素,一般可以考虑加上一个v-model (ul,li->v-for,key(有id用id,没有id用索引index))
4. 对于普通文本框,它的值是一个字符串,对于单个复选框,值是布尔值,一组复选框(v-model值一样 value不一样 值是一个数组)
5. 原理:v-model是一个语法糖 

<input v-model="msg">

<input :value="msg" @input="msg=$event.target.value">

6. 用在组件身上 (为了解决让用户使用更方便)
<组件 v-model="msg">
<组件 :value="msg" @input="msg=$event">


7. v-model相关的修饰符 
+ number 
+ trim 
+ lazy input->change 

v-for 

<ul>
   <li v-for="item in list" :key=item.id ></li>
</ul>


<ul>
   <li v-for="(item,index) in list" :key="index" ></li>
</ul>


虚拟dom 
1. 虚拟dom就是一个普通的js对象,用来描述真实的dom对象
2. 虚拟dom解决的问题(1. 真实的dom身上的属性太多 操作起来太笨重 2. 频繁操作真实的DOM会发生重绘和回流)

diff算法怎么理解的
1. 先说vue执行流程:
template -> 编译成render函数 -> 执行一下就得到虚拟dom -> 创建一个真实的dom 
当数据改变的时候,render函数会重新执行得到一个新的虚拟dom -> 新旧虚拟dom进行比对,找不同的地方,然后把不同的地方去patch(打补丁)
2. 具体diff策略
   + 同层比较,算法时间度是o(n) 
   + 二个根节点比对 
      1. 标签名不一样,这块就直接重建
      2. 标签名一样,只有属性和内容不一样,就地复用
   + 兄弟节点 
      1. 如果没有key,就地复用
      2. 如果有key,但是key是索引,和没有key没有区别,还是就地复用
      3. 有key,key是id,就根据id确定是不是同一个节点

   
样式
v-bind:style="{backgroundColor:'blue'}" 
v-bind:class="{类名:布尔值}" 

计算属性 全选 反选 总价 平均分 


1. 计算属性和method的区别 有没有缓存
2. 计算属性和watch侦听器区别
   + 概念 计算属性适合想要一个基于其他数据算出来的新的数据 watch就是用来监视data中的数据
      + 计算属性 一个数据变了要算出来一个新的数据
      + 侦听器 一个数据变了,我们想做一些事情 (用户名校验 用户名这个数据变了,我们要去发一个ajax看名字有没有重复) 
   + 使用场景: 当需要在数据变化时执行异步(ajax)或操作本地存储的时候用watch侦听器
      + todomvc,我们当时在数据发生新增\删除\修改的时候我们要把最新的数据放在本地存储 


计算属性完整写法
全选和反选 
我们用到一个复选框,我们这个数据是是否全选,所以这块要用计算属性,但是本身这个值是可以直接修改,这个时候可以用完整 写法

侦听器
deep:true,//数据是对象或数组的时候 引用类型 复杂类型 深度监听
immediate:true //立即监听

filter过滤器 货币 时间要格式化(moment.js)的时候 拿到一个时间戳或数字变成金额 字母大小写转换 

组件学习
1. 父子通信
2. $nextTick 数据更新了,视图不会立即更新(因为视图渲染是异步的) 所以我们想拿最新的视图,需要把代码写在nextTick里面 这个nextTick回调就会在视图更新完才会执行 
3. ref 当我们在vue里面要选中一个DOM或一个组件就可以用它 this.$refs.key 
4. slot插槽 (匿名插槽 具名插槽 作用域插槽)


数据更新之后,DOM不能立即更新,因为DOM更新是异步,如果想拿最新的DOM,要把代码放在nextTick里面
nextTick原理先看看支不支持微任务promise.then,如果支持就用这个,如果不支持再换成setTimeout,所以性能比直接setTimeout更高一点


组件从作用范围来说有两种 全局组件 局部组件
组件从功能来说有两种 页面级组件 公共组件


单向数据流:数据只能父亲传给儿子,儿子不能修改,只读的 
但是对象或数组可以改,但是不推荐


单向数据流 -> 父向子传值
双向数据绑定 -> 指的是v-model指令

当父子组件通信的时候,我们需要父亲把数据传给儿子,然后儿子也要能过自定义
事件修改这个数据,这个时候就可以用v-model



@click -> v-on:click 
:href -> v-bind:href 
#abc -> v-slot:abc 

父向子传的数据和作用域插槽传的数据的区别
1. 父向子传的数据 数据来自于父亲
2. 作用域插槽传的数据 数据来自于儿子


自定义指令:操作DOM 复用 

```js
Vue.directive("focus", {
  // 钩子函数 在某一个特定的阶段会自动执行
  /* 只会执行一次 在当前这个元素插入到DOM树上的时候会执行 */
  inserted(el, binding) {
    el.focus();
  },
  //data中数据更新的时候会执行
  update(el, binding) {},
});
```


说一下vue组件的生命周期
vue组件是有三个阶段 8个钩子函数 

1. 挂载(初始化) 
   + beforeCreate 这个时候vue刚初始化,数据和方法没有准备好
   + created 数据准备好了方法也准备好了
   + beforeMount vue实例通过$el找到视图,但是数据和视图没有同步
   + mounted  视图和数据同步
2. 更新
   + beforeUpdate 数据是最新的,但是视图还是旧的
   + updated 数据和视图又重新同步了
3. 销毁 
   + beforeDestroy 
   + destroyed

我在平时项目中最常用是这三个created,mounted,beforeDestroy 

其实还有三个钩子
一个是和缓存组件相关keep-alive activated激活 deactivated失活 


keep-alive把router-view包裹之后,组件就会被缓存,一缓存所有的默认生命周期钩子不执行,所以这个时候我们没办法用created,beforeDestroy,这个时候就有二个专用的替代这二个

errorCaptured 用来捕获后代组件的异常

总共钩子是有11个

vue核心知识点

1. todomvct重新写一遍
2. 笔记(day01-day04)