biubiubiu...

Vue学习笔记 -- vue2

简介

基础概念

指令、插值

  1. 插值、表达式
  2. 指令、动态属性
  3. v-html：会有xss风险，会覆盖子组件

computed \ watch

  1. computed 有缓存，data不变则不会重新计算
  2. watch默认浅监听，如果监听引用类型，会导致拿不到oldVal；如何深度监听？

class \ style

  1. 使用动态属性
  2. 使用驼峰式写法

条件渲染

  1. v-if v-else 的用法，可使用变量，也可以使用 === 表达式
  2. v-if 和 v-show的区别
    1. v-if 不render
    2. v-show 会render，使用display:none，隐藏
  3. v-if 和 v-show的使用场景
    1. v-if 切换不频繁 或 只判断一次以决定是否显示时使用
    2. v-show 切换频繁时使用，减少dom变化

循环（列表）渲染

  1. v-for（2.x之前只支持数组遍历，之后支持了对象）
  2. key的重要性，key不可以是random、index
  3. v-for和v-if不能一起使用：v-for优先级高于v-if，循环完才判断，会重复判断，影响性能，建议将v-if提高或降低一层使用

事件

  1. event参数，自定义参数
  2. 【观察】事件被绑定到哪里？
    1. event.__proto__.constructor 是原生的event 对象（MouseEvent）
    2. event.target 为当前元素
    3. event.currentTarget 为当前元素

    event是原生的，事件被挂在到当前元素。

事件修饰符

事件修饰符

按键修饰符

按键修饰符

表单 v-model

  2. 常见表单项 textarea checkbox radio select
  3. 修饰符 lazy(节流) number(转化为数字) trim(去空格)

vue组件

组件间通讯

  1. props、$emit （父子组件通讯）

  2. 自定义事件（兄弟组件通讯）

    // event.vue
import Vue from 'vue'
export default new Vue();

// something.vue
import event from './event'
// event 是一个vue实例
event.$emit('xx',this.func)  // 调用父组件的事件用 this.$emit
event.$on('xx',this.func)

beforeDestroy(){
    // 解绑自定义事件
    // 及时销毁，避免内存泄露
    event.$off('xx', this.func)
}

组件生命周期

单个组件

  • 挂载
  • 更新
  • 销毁

tips

  • created：vue实例初始化结束，页面还未开始渲染
  • mounted：页面已经渲染完了，可以进行ajax请求
  • beforeDestroy： 解除绑定 销毁子组件以及事件监听器

父子组件

  • 挂载 父created --》 子created --》 子mounted --》 父mounted； 创建（初始化实例）从外到内，渲染从内到外
  • 更新 父beforeUpdate --》 子beforeUpdate --》 子updated --》 父updated； 开始更新（数据改变）从外到内，完成更新从内到外
  • 销毁

vue高级特性

自定义v-model

  1. 使用:value而不是v-model
  2. 事件要与model.event对应
  3. :value值xx要与model.prop的值、props.xx对应

$nextTick、refs

vue是异步渲染，data改变之后，dom不会立刻渲染 $nextTick会在dom渲染之后被触发，以获取最新dom节点

<div ref="yy" />
<script>
    // 获取dom元素
    const elem = this.$refs.yy
    console.log(elem.childNodes.length)  // 这里打印已渲染完的长度,

    this.$nextTick(()=>{ 
        // 异步渲染：$nextTick待dom渲染完再回调
        // 页面渲染时会将data的修改做整合，多次data修改只会渲染一次
        const elem1 = this.$refs.yy
        console.log(elem1.childNodes.length)  // 这里打印已处理完的长度
    })
</script>

slot 插槽

父组件往子组件里面“插”一些东西

基本使用

作用域插槽

具名插槽

具名插槽

动态组件

动态组件

异步组件

体积比较大的库（echart等）

  • import() 函数
  • 按需加载，异步加载大组件 

keep-alive

缓存（频繁切换，不需要重复渲染）、提高性能

  • v-show 通过控制css，keep-alive是vue框架级别进行的优化

mixin （组件抽离公共逻辑，vue3 使用 composition API）

项目业务复杂，各组件出现需要复用的逻辑 vue3的composition api解决了 mixin 存在的问题

  • 存在的问题：
    1. 变量来源不明确（建议规定相关注释规范），不利于阅读、查找
    2. 多mixin可能会造成命名冲突
    3. mixin和组件可能出现多对多的关系，复杂度较高

Vuex

基本概念

  • state
  • getters
  • action (异步操作：ajax、读取indexDB，整合一个或多个mutations)
  • mutations(原子操作，力求原子最小、同步)

用于vue组件

  • dispatch
  • commit
  • mapState
  • mapGetters
  • mapActions
  • mapMutations

基本使用 api

state的数据结构设计

Vue-router

路由模式

路由配置

  • 动态路由 动态路由
  • 懒加载 

posted @ 2021-04-15 16:30  了恩  阅读(91)  评论(0)  编辑  收藏  举报