Vue 的杂项

介绍

Vue 杂项记录

分页三种类型

基于页码（pagenum）和每页条数（pagesize）实现分页，orderName(按照那个字段排序)（表格分页）

• 基于接口文档 设置 页码 每页条数 服务器根据 页码 返回获取的数据
• 也需要基于列表总数 来判断是否加载完毕(本地列表数 比对 服务器总列表数)

基于页码的分页接口api 例子

// 根据关键字 搜索文章列表的api接口
//! 分页方法: 根据 pagenum pagesize 根据页码 和 每页条数 进行分页
export const searchArticles = (options) => { // 分页传参的时候 直接传对象即可
  return request({
    method: 'get',
    url: 'v1_0/search',
    // axios传递get请求参数本来就是使用params
    // 利用传统的分页方法 获取分页的文章列表
    params: {
      // 当前页码
      page: options.pagenum,
      // 每页的条数
      per_page: options.pagesize,
      // 查询的关键字
      q: options.kw
    }
  })
}

判断分页加载完毕

      // 判断时候加载了全部数据 加载全部数据让其 finished 加载完毕状态位 设置为true
      if (this.list.length === this.total) { // total是服务器返回的 模糊搜素条目的总数 满足总条数后 把获取文章列表状态位设置为true
        // 如果以展示所有数据 那么 把finished 加载完毕状态位 设置为true
        this.finished = true
      } else {
        // 如果没有加载结束 继续获取数据(继续添加页码 服务器通过页码返回搜素数据的)
        this.queryData.pagenum += 1
      }

---

• 基于时间排序：上一次请求返回的结果包括本页数据和下一页数据开始的时间（下拉加载分页场景）
  • 基于后端返回的时间 来进行数据获取

//! 通过频道关联 实现 比对文章切换属性值 实现切换 的接口
//! 命名导出 设置分页参数(时间戳) 频道单独id参数
export const getArticles = (channelId, timestamp) => {
  return requset({
    method: 'get',
    url: 'v1_1/articles',
    params: {
      // 分页参数
      timestamp: timestamp,
      // 频道id
      channel_id: channelId,
      // 是否包含置顶数据
      with_top: 1
    }
  })
}

判断分页加载完毕

      //! 24. 进行判断 查看服务器是否有更新数据
      if (ret.data.results.length > 0) {
        //! 25. 如果服务器有新的数据 那就覆盖当前储存数据的数组 实现更新
        channel.articles = ret.data.results
        //! 26. 如果服务器返回了时间戳 则替换当前数组的时间戳
        if (ret.data.pre_timestamp) {
          //! 把数组的时间戳 替换为服务器返回的新时间戳
          channel.timestamp = ret.data.pre_timestamp
        }
      } else {
        //! 27. 如果服务器没有更新数据 那么提示用户 没有数据更新 什么也不做
        channel.pullText = '没有数据更新'
        //! 优化提示
        channel.articles = []
        channel.timestamp = ret.data.pre_timestamp
        this.onLoad()
      }

---

• 基于数据id排序: 每加载一组数据(后端规定 10条一般) 服务器都会返回一个 id值 储存id值 上传到服务器 服务器根据id值 返回新的分页数据 如果id不返回 说明没有数据 分页结束

基于时间戳接口api 例子

// 评论接口
export const comment = (options) => {
  return request({
    method: 'post',
    url: 'v1_0/comments',
    data: {
      // 文章的id
      target: options.target,
      // 评论内容
      content: options.content,
      // 如果参数target是文章id，那么这个参数不需要
      // 如果参数target是评论id，那么这个参数表示文章id(回复评论时候用到)
      art_id: options.articleId
    }
  })
}

判断分页加载完毕

      // 判断结束的条件(评论分页是根据评论数据id来加载分页的 如果不返回新的评论数据id 就说明已经没有评论了)
      // last_id是服务器返回的新评论id 需要把页面的分页参数(评论数据id)设置为 服务器返回的新评论数据id
      // 如果为空(false)说明没有数据了 设置分页加载完毕的状态位
      if (ret.data.last_id) { // 如果还有新数据(true) 继续加载评论分页
        // 把服务器返回的新评论id 设置给页面的分页参数(评论数据id)
        this.offset = ret.data.last_id
      } else {
        // 如果服务器不返回新的评论id 说明已经没有评论数据了 把加载完整状态位设置为true
        this.loading = true
        this.$toast('没有评论了')
      }

对象方式的正则表达式 RegExp

• new RegExp是正则表达式 对象方式表达 里面

  • 格式: new RegExp(pattern, attributes)

    • 参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。(进行规则设置)

• 参数 attributes 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配(进行全局设置)

      // kw此时包括span高亮的标签，需要去掉
      const reg = new RegExp(`<span>${this.q}</span>`, 'ig') //RegExp是正则表达式 对象模式
   	  kw.replace(reg, this.q) // 替换方法 replace(替换规则,替换数据)

Vue的防盗链设置

在index.html中添加:

<meta name="referrer" content="no-referrer">

Vue 模板的三种编译方法 render

render 编译方法 (opens new window)

Vue组件的模板由如下三种写法

基于 Vue.component() 注册全局组件

• template
  • template 传统的定义组件的方式(不可以用在Vue脚手架)

Vue.component('my-com', { 
    data () {    
        return {      msg: 'nihao'    }  
    },  
// 脚手架的开发环境不支持字符串模板，但是本质上，template在运行阶段，会自动编译成render函数  // render函数比template更加底层  template: '<div>{{msg}}</div>  }

• el
  • el 只能用在 new Vue实例场景中
• render
  • render 更加底层的一种模板实现(可以用在Vue脚手架等特殊情况)
  • render函数支持JSX语法结构（在js代码中直接写标签（HTML和组件标签））
    • 要外包一层唯一的根节点(div)

  // render是渲染组件模板 和 template效果一样 但是没人会用render写 
// render 函数比 template更底层 更好编译(Vue提供)  
// 脚手架环境下 template不支持 只能用 render渲染模板  
            render (h,context) { 
                // render 参数1是返回自身 需要return 参数2 可以获取父组件传递过来的值    
                // createElement的参数  // 参数一，表示标签名称  // 参数二，表示里面的内容子元素   
                return h('div', 'hello') 
            }})

render 支持 JSX 可以写html标签 和 数组

• Vue的render函数支持JSX作为返回值，这个返回值本质上是虚拟DOM节点
  • 在JSX中插值表达式用的单的花括号 Vue3 支持{{}} Vue2不支持
  • 也需要外包一层div

      // js结合标签一块写（JSX）    
      // Vue 的render函数支持React的JSX语法规则
      // JSX的语法结构是再js代码中写html标签和组件标签
      // JSX中的标签 可以作为函数参数 返回值 也可以赋值给一个变量    
      // JSX外面也要包一层div	 
render (createElement) {    
      return(       
          <div>         
          <div>tome</div>       
          <div>jerry</div>       
          </div> 
      )}

总结：

1. JSX：React框架提供的语法规则（在js代码中直接写HTML标签（组件标签））
2. Vue的render函数支持JSX作为返回值，这个返回值本质上是虚拟DOM节点 VNode
3. 虚拟DOM节点VNode本质上就是对象，这个对象描述了真实的DOM元素。

axios封装通用的接口模块

utils文件夹 一级路由 axios接口模块设置 utils文件夹里面创建 request.js

• 配置 axios.create({}) 分支设置url基础地址 方便操控
• 调用axios方法 设置基本url路径 设置参数 配置数据
  • 设置属性: method(请求方式) , url(地址) , data(请求体) , params(请求方式参数) , headers(请求头)
• return 返回结果

目标: 封装通用的接口调用模块

作用: 配置通用的axios接口模块 方便统一修改 统一配置 统一更换 减低耦合

// 导入 axios组件
import axios from 'axios'
// 设置基准axios路径 用常量保存
const baseURL = 'http://api-toutiao-web.itheima.net/app/'
// axios分支的方法 创建axios接口调用方法 取代单一的axios方法(方便单独设置)
const instance = axios.create({
  // baseURL是axios属性 用来声明url基础路径(比对上面声明的常量)
  baseURL: baseURL
  // 超时,如果超过10秒，后端没有返回数据，那么就报错 (可以自行设置)
  timeout: 10000
})
// 封装通用的接口调用方法
export default (options) => {
  // 这里的返回值是Promise实例对象
    // return 返回数据 instance是声明的axios分支方法
  return instance({
    // 设置请求方式
    method: options.method || 'GET',
    // 设置请求地址
    url: options.url,
    // POST/PUT请求参数（请求体）
    data: options.data,
    // GET请求参数（自动拼接到url地址中）
    params: options.params,
    // 设置请求头(一般用于跨域问题 和 传输token)
    headers: options.headers
  })
}

template标签复用性(嵌套)

• template标签 一般只需要设置一个 然后再里面填写内容 但是可以嵌套多层template
  • 嵌套的template可以用来同一控制标签 并且自身不会被渲染
• 注意 还是需要一层div 包裹在最外层

<template>
<!-- 最外层包裹div标签 -->
<div>    
    <!-- 嵌套的template可以用来同一控制标签 并且自身不会被渲染 -->  
    <!-- 比如控制 很多div的v-if -->  
   <template v-if='isShow'>         
   <!-- v-if 统一控制 template里面的div显示与隐藏 实现批量控制 -->      
       <div>你好</div>      
       <div>你好</div>     
       <div>我号</div>   
	</template>    
</div>
</template>
<script>   
    export default {  
        data(){   
            return{        
                // 控制显示与隐藏              
                isShow:flase // 让其隐藏         
            }       
        }   
    }
</script>

递归函数

让自身函数自己调用自己 不断重复执行 递归函数一定要注意，处理不当就会进入死循环。递归函数只有在特定的情况下使用 ，比如阶乘函数

递归函数不添加return会死循环

递归函数的解析:

1. 设置一个递归函数

2. 递归的执行顺序

3. 递归结果

​

Vue文件中 data()

data() 一般用来存储数据 必须要return里面

• data()里面也可以定义函数方法 但是要写在 return外面

  • 在data() 里命名函数方法 不需要this调用

  data () {
      // 其他组件调用的时候 无需添加this 直接名称即可 要写在return外面
      const validateName = (rule, value, callback) => {       
      
          // 方法内容
          
      }
  }
  

• 在 methods: 方法中定义函数方法

  • 不需要写变量 和 箭头函数 需要用this调用

  // 调用的时候 需要添加this
  methods:{     
      validateName(rule, value, callback){          	        
          
          // 	函数方法内容   
          
          }  }
  

  Vue初始化data()里面指定的数据 $options

• 一键清除data()指定内容的所有数据

• 常用于清除 form表单里面的输入内容 实现初始化(一键还原)

• 如果想要持续初始化 需要赋值给原数据

初始form里面的数据

• 常用于 通过三元表达式 动态判断标题显示的名称

// 左侧是赋值初始化后的数据 右侧是进行初始化										   // 如果不赋值给原数据 初始化组件关闭后就失效           this.formData = this.$options.data().formData

Vue 动态显示不同的内容 三元表达式

• 利用三元表达式 动态判断data()中是否存在数据 动态显示不同的名称

通过 饿了么ui对话框组件 (opens new window) 来实现动态切换标题

• 查询formData里面的id是否存在
  • 存在id 标题名称为编辑内容
  • 不存在id 标题为添加内容

<!-- 查询formData里面的id是否存在 如果存在id 标题名称为编辑内容 不存在id 标题为添加内容 -->  
<el-dialog :title="formData.id ? '编辑内容' : '添加内容'" >

• 注意: 因为添加内容判断的是 是否存在内容 所以添加内容完毕后 需要重置data()里面的数据
  • 重置data()里面指定的数据 $options Vue提供的方法
    • 重置data()里的数据后 再次判断是否存在id 显示编辑内容 才能正常

// 左侧是赋值初始化后的数据 右侧是进行初始化										   
// 如果不赋值给原数据 初始化组件关闭后就失效
this.formData = this.$options.data().formData

样式动态绑定

• 样式动态绑定 分为:class类名动态绑定 和 :style 行内样式动态绑定

class 类的动态绑定

• :class="[]" 可以绑定多个class类名 还可以做三元判断

     <div v-for="(item,index) in deptList" :key="index" class="permission_check">
		<div :class="['permission_check_box',PermissionChange === index ? 'backgroundTrue' : 'backgroundFalse']" @click="changePermission(index)">
          {{ item }}
        </div>
      </div>

style 行内样式绑定

• 可以给模板设置data()中的值 实现动态style行内样式设置

• :style可以直接在模板上 设置样式(行内样式 高权重) 事件监听也支持 相当于用JS来进行css样式设置

• :style有两种写法动态写法

  1. 通过{}来写 他的写法和JS修改样式写法一样 带有-的css样式 必须变成驼峰式写法 用,进行分割
  2. 通过模板字符串来写 模板字符可以使用单位拼接 也可以直接使用拼接好的值 用;进行分割

<template>
	<div>
        <!-- 通过{}来写 他的写法和JS修改样式写法一样 带有-的css样式 必须变成驼峰式写法 -->
		<div :style="{maxWidth: 'widthValue',width: '100%'}" />
        <!-- 通过模板字符串来写 模板字符可以使用单位拼接max-width: ${widthValue}px; 也可以直接使用拼接好的值 -->
        <div :style="`max-width: ${widthValue};width: ${100}%`" />    
    </div>
</template>

// widthValue的值
widthValue: '400px',

设置路由的懒加载(按需加载) component 重要

• 普通导入路由的时候 页面如果加载 会把所有路由组件都加在进来
• 当设置路由懒加载的时候 不会一次性加载所有配置的路由 页面加载更快

普通导入路由的方法

const router = new VueRouter({
  routes:[
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

路由懒加载导入方法

const router = new VueRouter({
  routes:[
    {
      path: '/',
      name: 'Home',
        // 这里是导入组件的Home路径
      component: () => import('../views/Home.vue')
    },
    {
      path: '/about',
      name: 'About',
      // 这里是导入组件的About路径
      component: () => import('../views/About.vue')
    }
  ]
})

• 通过变量import导入设置懒加载

// 导入Vue router Vu3
import { createRouter, createWebHashHistory } from 'vue-router'
// 声明常量的方式按需配置路由(变量方式配置路由懒加载)
const Layout = () => import('@/views/layout')
const Home = () => import('@/views/home')
const routes = [
  {
    // 一级路由
    path: '/',
    component: Layout,
    children: [
      // 二级路由
      // 导入路由的懒加载
      { path: '/', component: Home }
    ]
  }
]
const router = createRouter({
  // 设置hash路径方式
  history: createWebHashHistory(),
  // 映射 routes配置的路由
  routes
})
// 导出router实例化对象
export default router

Vue的按需导入组件 import

• 按需导入指的是 当该组件功能用到的时候 才会加载该内容 (普通导入在页面加载时候 就会加载)
• 按需导入可以提高页面打开效率 常用于导入大文件的时候使用(超过50kb)

普通的导入方法

import demo from '导入的路径' // 方式导入 打开页面会加载

按需导入(异步导入)的方法

• 使用的时候 再导入该组件 适用于异步导入

 import('@/vendor/Export2Excel') // 使用组件的时候 再import导入

Vue中的echarts使用方法

• echarts基本使用流程
  • 安装依赖包
  • 导入echarts
  • 准备一个图表的填充位置
  • 调用echarts提供的方法初始化图表到填充位
  • 图表的效果由options提供（来源于官方案例）

目标：封装一个echarts中的雷达图表显示在首页的绩效指数的位置

第一步， 安装echarts图表

npm install echarts

echarts是一个很大的包，里面包含了众多图形，假设我们只使用雷达图，可以做按需加载

第二步， 新建雷达图组件

• 路径: src/views/dashboard/components/WorkChart.vue (在components里面设置 导入到页面组件上)

  • 组件设置好后 用components方法导入进来

• 按需导入需求的模块 (测试使用的是假数据)

<template>
  <!-- 雷达图  图表必须给高和宽度-->
  <div ref="workChart" class="work-chart" />
</template>

<script>
// 完整加载过程
// import * as echarts from 'echarts'
// 按需加载
import * as echarts from 'echarts/core' // 引入主模块
import { RadarChart } from 'echarts/charts' // 引入雷达图
// 引入提示框和标题组件
import { TitleComponent, TooltipComponent } from 'echarts/components'
// 引入canvas渲染器
import { CanvasRenderer } from 'echarts/renderers'
// 注册必须的组件
echarts.use(
  [TitleComponent, TooltipComponent, RadarChart, CanvasRenderer]
)

export default {
  // 页面渲染完毕事件
  mounted() {
    const myChart = echarts.init(this.$refs.myDiv) // 得到图表实例
    myChart.setOption({
      title: {
        text: '基础雷达图'
      },
      tooltip: {},
      legend: {
        data: ['平均水平', '个人价值']
      },
      radar: {
        // shape: 'circle',
        name: {
          axisName: {
            color: '#fff',
            backgroundColor: '#999',
            borderRadius: 3,
            padding: [3, 5]
          }
        },
        indicator: [
          { name: '工作效率', max: 100 },
          { name: '考勤', max: 100 },
          { name: '积极性', max: 100 },
          { name: '帮助同事', max: 100 },
          { name: '自主学习', max: 100 },
          { name: '正确率', max: 100 }
        ]
      },
      series: [{
        name: '平均 vs 个人',
        type: 'radar',
        // areaStyle: {normal: {}},
        data: [
          {
            value: [80, 80, 80, 80, 80, 80],
            name: '平均水平'
          },
          {
            value: [90, 75, 95, 90, 95, 90],
            name: '个人价值'
          }
        ]
      }]
    })
  }
}
</script>

<style>
.work-chart {
    width: 600px;
    height: 400px;
}
</style>

总结：

1. echarts如何在Vue脚手架环境下使用
2. 需要使用mounted生命周期（保证可以获取DOM元素填充位）
3. 新版本的echarts按需导入的新的用法

Vue-router 两种跳转方法 path和fullPath

• fullPath是路由全地址 带参数
• path是路径，不带参数

跳转案例(携带参数)

如：192.168.0.1/index?page=1

• fullPath为/index?page=1
• path为/index

把数字转换成千分格式(每三位加一个逗号) 和格式化时间

• toLocaleString() 方法可以格式化数字 把数字格式转换成千分格式(每三位加一个逗号)

let a = 200000000
console.log(a.toLocaleString()) //200,000,000

• toLocaleString() 该方法也可以快速格式化默认时间 格式是2021/8/6下午7:44:27

let d=new Date();
let n=d.toLocaleString();
console.log(n) // 2021/8/6下午7:44:27

格式化后时间格式

把url地址进行编码 encodeURIComponent()

• encodeURIComponent()方法可以对url地址进行编码 防止两个url重叠 出现问题
• 常用于 主url地址需要拼接另一个url地址 为了防止拼接的url地址妨碍主url地址 就需要给要拼接url地址进行编码

两个url地址拼接例子

// 主url地址
const baseURL = 'https://apipc-xiaotuxian-front.itheima.net'
// 要拼接的url地址
const redirect = encodeURIComponent('http://www.corho.com:8080/#/pay/callback')
// 两个url地址进行拼接
const payUrl = `${baseURL}${redirect}`
// 转码拼接的结果
//https://apipc-xiaotuxian-front.itheima.nethttp%3A%2F%2Fwww.corho.com%3A8080%2F%23%2Fpay%2Fcallback
console.log(payUrl) 

Vue中的computed计算属性传参

• vue的computed属性可以传递模板的参数

template

• 模板中给计算属性进行传值

<div>
    {{ spaceUser(item) }}
</div>

computed

• 需要闭包的方式来写(也许是闭包) 设置一个方法并return出去 并且方法里面的值也需要return

  computed: {
    spaceUser () {
    // 这里 设置方法 并接收传参
      return function (item) {
      // 接收模板传来的参数
        console.log(item)
        // 返回该方法处理后的值
        return e
      }
    }
  },

Vue中的动画内置组件

• 通过Vue内置的动画组件transition (opens new window)实现显示和隐藏的过度效果

  • v-if和v-show都可以使用

• 参数列表

  • v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
  • v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
  • v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
  • v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
  • v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
  • v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
  • v-appear：定义在初始渲染时的开始状态。
  • v-appear-active：定义初始渲染时的状态。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
  • v-appear-to: 定义初始渲染时的结束状态。

使用方法

• 在模板中 用 <transition name="fade"></transition> 把需要动画的v-if或者v-show包裹起来

<transition name="fade">
	<span v-show="isShow">动画效果</span>
</transition>

• 在css中写入 显示隐藏的效果

.fade-enter-active, .fade-leave-active {
	transition: opacity .25s
 }
 .fade-enter, .fade-leave-to {
	opacity: 0
} 

• 效果

两个优秀的动画库

可以搭配动画库使用，推荐两个动画库Animate.css (opens new window)

搜索函数防抖

• 简单的用户搜索防抖 在用户输入完毕后 进行搜索 输入的时候 不进行搜索的交互效果

<template>
<el-input v-model="input" @input="search" placeholder="请输入内容"></el-input>
</template>
<script>
    export default {
      data() {
        return {
          input: "",
            // 设置防抖状态位
          timer: null,
        };
      },
    search() {
          clearTimeout(this.timer)
          this.timer = setTimeout(() => {
             // 执行操作代码....
             console.log(this.input)
          }, 1000); // 设置时间
        },
    }
</script>

• 封装成通用方法 使用闭包防止重复创建影响性能

/**
 * 防抖
 * @param fn 传入方法
 * @param delay 传入时间
 * @使用闭包防止重复创建影响性能
 */
export default function (fn, delay) {
    let timer = null
    return function () {
        if (timer) {
            clearTimeout(timer)
            timer = setTimeout(fn, delay)
        } else {
            timer = setTimeout(fn, delay)
        }
    }
}

强制更新视图层

• 在Vue2中 由于受JavaScript的限制，Vue2不能监听 (opens new window)对象属性的添加和删除，因为在Vue2组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图层才会响应该数据的变化
• 也就是非data声明的数据 在Vue2中不具备响应式 可以通过this.$set()进行响应式绑定

this.$set(obj, key, value)

更激进更方便的视图更新

• this.$set()不适合大量数据 我们可以通过$forceUpdate() (opens new window) 强制组件进行视图更新
  • 适合 路由切换时，页面数据比较复杂 和 改变多维数组里面的数据
• 注意：这不会更新您拥有的任何计算属性computed。调用$forceUpdate只会强制重新渲染视图 (opens new window)

<template>
  <div>
    <div class="hello">
      <button @click="setMessage">添加属性</button>
      {{ student.name }}
      <input v-model="student.age" type="text">
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      student: {
        name: '张三'
      }
    }
  },
  methods: {
    setMessage () {
      this.student.age = 15
      this.$forceUpdate()
    }
  }
}
</script>

组件/元素的刷新

• 如何优雅的刷新当前页面 肯定不能模仿F5进行页面的刷新啊 上面我们记录了$forceUpdate() (opens new window) 用来更新页面的视图数据 如果我们想深入刷新 就需要用到Vue的key更换
• 要正确地做到这一点，我们将提供一个key属性，以便 Vue 知道特定的组件与特定的数据片段相关联。如果key保持不变，则不会更改组件，但是如果key发生更改，Vue 就会知道应该删除旧组件并创建新组件。
• 我们可以采用这种将key分配给子组件的策略，但是每次想重新渲染组件时，只需更新该key即可。

<template>
  <component-to-render :key="componentKey" />
</template>

<script>
// 请忽略组件的导入
export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
    }
  }
}
</script>

• 你甚至都可以给<div />进行key的绑定

<template>
   <div :key="componentKey">
   {{ componentKey }}
   </div>
</template>

<script>
export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
    }
  }
}
</script>

• 每次 forceRerender被调用时，我们的componentKey都会改变。当这种情况发生时，Vue将知道它必须销毁组件并创建一个新组件。我们得到的是一个子组件，它将重新初始化自身并“重置”其状态。

• 他会执行所有的生命周期的内容 例如: created() beforeDestroy() 和 destroyed() 相当于自身的重置 并且只是自身 而且F5那种刷新方式

取消Vue的双向绑定(数据代理)

• Vue2通过Object.defineProperty() (opens new window) 进行数据代理 那么如果面对大量且不做修改的数据 就不太需要Vue进行数据代理了
• 通过Object.freeze() (opens new window) 进行数据冻结( 支持Object对象 和 Array数组) 不让Vue进行数据代理
  • 冻结一个对象或者一个数组,冻结的是对象本身
  • 冻结后的对象或者数组不能被修改
  • 不能添加新的属性 不能删除已有属性 不能修改已有属性的值
  • 返回值是被冻结的对象本身，与被冻结的源对象完全一致，也被冻结

接口获取数据的时候 取消Vue2双向绑定

• 通过Object.freeze取消其在data中的双向绑定

export default {
  data: () => ({
    users: {}
  }),
  async created() {
    const users = await axios.get("/api/users")
      // 取消代理
    this.users = Object.freeze(users)
  }
}

• 如果您需要修改数组，您仍然可以通过创建一个新数组来完成。例如，为了添加一个项目，你可以这样做：

state.users = Object.freeze([...state.users, user])

在Vuex中使用

• Vuex 可以取消数据代理 因为Vuex默认是有代理的 可以通过Object.freeze 取消其代理

const mutations = {
  setUsers(state, users) {
    state.users = Object.freeze(users)
  }
}

动态修改路由参数

• router.push的query参数可以通过解构的方式 还原之前的参数 再通过声明添加一个新的参数 这样不会造成原参数消失并能添加新的参数

// 修改路由参数 记忆分页
this.$router.push({
  query: { ...this.$route.query, pageNumber: 123 },
})

Vue3模块

• 对于Vue3的一些内容进行记录

Hash 路由和history路由

• vue的路由分为两种模式 createWebHashHistory Hash 路由 和 createWebHistoryhistory路由

  • Hash 模式 (opens new window) 经典开箱即用无需服务器配置 它在 SEO 中确实有不好的影响
    • 这种模式无需服务器配置 开箱即用

  // createWebHashHistory 导入Hash模式路由
  import { createRouter, createWebHashHistory } from 'vue-router'
  
  const router = createRouter({
    history: createWebHashHistory(),
    routes: [
      //...
    ],
  })
  

  • HTML5 模式 (opens new window) 又称为history模式 美观漂亮但需要单独配置服务器配置(比如: Nginx)
    • 如果不配置服务器配置 用户在浏览器中直接访问带有路由的地址(比如: https://example.com/user/id) 就会得到一个 404 错误 所以必须配置服务器配置

  // createWebHistory 导入history模式路由
  import { createRouter, createWebHistory } from 'vue-router'
  
  const router = createRouter({
    history: createWebHistory(),
    routes: [
      //...
    ],
  })
  

vue3加ts出现找不到模块问题

• 在Vue3的ts环境下 直接导入路由 会报错
  • 找不到模块“...”或其相应的类型声明。ts(2307)

• 出现这个问题的原因大概就是：ts只支持导出导入模块，但是vue不是模块，我们需要申明一下vue是个模块，你ts可以导入， 问题解决方法：
  • 在src目录下创建 env.d.ts文件

• 然后复制以下代码即可

declare module '*.vue' {
  export default component
}