临时又有任务/
⚖️前端体系/框架
Search
⚖️

前端体系/框架

Created
Dec 2, 2021 05:21 AM
Tags
Vue
简介
notion image
前言：
业务设计的能力
基本使用，高级特性，周边插件
基本原理的了解，热门技术的深度，全面性
实际应用，设计能力 组件结构， 数据结构
正常工作，原理，设计能力（独立自主）
面对产品经理提出需求，能够实现出来
🤪Vue概念
服务资料：
1vue内部原理剖析
www.kancloud.cn
https://www.kancloud.cn/sllyli/vuejs/1244017

一：VUE使用

高级用法不一定常用，要知道他们的存在
建议，先学vue2再到vue3
vue2社区生态比较好，2年了。不会立马更新到vue3。
文档是备忘录，给会用的人查阅的，所以是低效率的，时间有限，青春是很短暂的。

基本使用

日常使用，面试必考。梳理知识点，挑出重点和核心。

插值，指令

v-html:xss风险，会覆盖子元素

列表渲染

key=业务id
//key 应该是唯一的，数组中没有的话，就让后端加
v-for="(item,index) in listArr"  :key="item.id"// 数组
v-for= "(item,key,index) in listObj :key="key" //对象

listArr = [ 
	{id:'a',title:'标题'}
]
listObj = {
	a:{title:'标题'}
}
ps** v-if v-for 不能写在一起，分开可以

事件

//事件被挂载当前元素； methods中，获取到的event是原生的
@click="increment1"
@click = "increament2(2,@event)"//注意传参的写法

//事件修饰符
.stop //阻止单击事件继续传播
.submit.prevent // 提交事件不再重载页面
:click.stop.prevent // 
:click.capture //
:click.self //

v-model.tirm

表单（写一下）

Vue组件使用

props，$emit
组件通讯-自定义事件
组件生命周期

vue高级特性

  • 自定义v-model
  • $next Tick
  • refs
  • slot
  • 动态组件
  • 异步组件
  • keep-alive
  • mixin
 
this.$emit // 调用父组件定义的事件
...
//创建事件的组件
event.$emit（'onAddTitle',this.title） // 调用自定义事件（事件名，参数）
//侦听事件的组件
mounted(){
	event.$on('onAddTitle',this.addTitleHandler)
}
beforeDestory(){
	event.$off('onAddTitle',this.addTitleHandler)

二：vue原理

前言：知其然知其所以然；了解原理，才能应用的更好。大厂造轮子（大公司，小公司听到碰不到）

组件化基础

很久以前的组件化
  • asp php
  • node.js
区别
传统组件，只是静态渲染，更新还要依赖于操作dom
数据驱动视图 vue mvvm（画图，加代码讲一边+数据驱动视图的相关描述）

vue响应式(重点)

组件data的数据变化，立即触发视图更新
实现数据驱动视图第一步
解答：
  • 核心API Object.defineproperty（代码演示）
  • 上面的API缺点（结合Vue3.0Proxy）

proxy有兼容性的问题

Proxy兼容性不好，且无法polyfill
2.0会存在一段时间

object.defineProperty基本用法

代码演示：
get set

object.defineProperty实现响应式

  • 监听对象，数组
  • 复杂对象，深度监听
  • 缺点
缺点：(不要放大缺点)
  • 深度监听，递归到底，一次性计算量大。极端例子，如果对象很大，页面会卡死。
  • 无法监听新增删除属性（Vue.set vue.delete）老项目很重要
  • 无法原生监听数组，需要特殊处理
手写一遍
核心：
1.Object.defineProperty(target,key,value){}
2.defineReactive(target,key,value){}
3.Observer(target){}
1.是核心API
2.1在2中进行遍历（处理一些情况）
     
    function updateView(){
  console.log("更新视图")
}

function defineReactive(target,key,value){
  // console.log(target,key,value);

  Observer(value);

  Object.defineProperty(target,key,{
    get(){
      console.log("getter");
      return value;
    },
    set(newValue){
      if(newValue === value){
        return;
      }

      Observer(value);

      console.log("setter");
      value = newValue;
      updateView();

    }
  })
}

function Observer(target){
  if(typeof target !== 'object' || target === null){
    return;
  }
  // Object.keys(target).forEach(key => {
  //   defineReactive(target,key,target[key]);
  // })
  for(let key in target){
    defineReactive(target,key,target[key]);
  }
}

// 新增 或者 删除 属性 侦听不到 
// 用 Vue.set(obj,key,val) 方法 
mounted () {
  this.$set(this.student,"age", 24)
}
// Vue.delete(obj,key);

    虚拟dom和diff

    vdom是实现vue和react的重要基石
    diff算法是vdom中最核心最关键的部分
    vdom是一个热门话题……
    • dom操作非常耗费性能（耗时）
    • 用jq，可以自行控制dom操作时机，手动调整
    • 数据驱动视图，如何有限控制dom操作。
    （框架内部问题）
    • 有了一定的复杂度，想减少计算次数比较难？
    • 能不能吧计算，更多转移为js计算，因为js执行速度很快
    • vdom，用js模拟dom结果，计算出最少变更，操作dom

    用js 模拟dom结构

    //用一个对象模拟里面有tag ，props，children
    对象A
    tag:标签
    props:属性（对象）
    children:数组，子项也是一个对象A的格式
    notion image

    通过Snabbdom学习vdom

    //vue3.0重写了vdom的代码，优化了性能。
    //vdom的基本理念不变
    //react vdom 具体实现和vue也不同，不妨碍同一学习

    使用Snabbdom，练习

    h函数（创建vnode节点）
    vnode数据结构与对象A格式相似的
    var vnode = h(对象A)
    patch函数 初始渲染和更新
    patch(container,vnode)
//
patch（vnode,newvnode）

    vdom总结

    1. 用js模拟dom结构（v-node）
    1. 新旧vnode对比，得出最小的更新范围，最后更新dom
    1. 数据驱动视图的模式下，有限控制dom操作

    diff算法

    diff算法概述

    • diff即对比，是一个广泛的概念，如Linux diff ,git diff
    • 两个js对象也可以做diff
    • 两棵树vdom

    树diff的时间复杂度o(n^3)

    • 第一，遍历tree1,第二，遍历tree2
    • 第三，排序
    • 1000个节点，要计算1亿次，算法不可用。
    框架作者，解决了上面的问题

    优化了时间复杂到on

    • 只比较同一层级，不跨级比较
    notion image
    • tag不相同，则直接删掉重建，不再深度比较
    notion image
    • tag和key，两者都相同，则认为是相同节点，不再深度比较 （v-for中的key使用业务id）

    Snabbdom源码解读

    h函数，vnode(),返回vnode对象

    最终由h函数返回是一个对象｛ sel，data，children，text，elm，key｝

    patch函数

    1. hook 生命周期节点
    1. 第一个参数不是vnode,创建一个空的vnode关联到这个dom元素
    1. 相同的vnode（key sel相同）
    1. 不相同，就直接删掉重建
     
    vdom核心概念：h vnode patch diff key
    vdom存在的价值重要：数据驱动视图，控制dom操作
     

    模板编译

     

    组件 渲染/更新过程

    响应式：监听data属性 getter / setter（包括数组）
    模版编译：模版到render 函数，再到vnode
    vdom:patch（elem,vnode) 和 patch(vnode,newVnode)
    notion image
    • 初次渲染
    1. 解释模版为render函数（或在开发环境已完成，vue-loader）
    1. 触发响应式，监听data属性 getter,setter
    1. 执行render函数，生成vnode,patch(elem,vnode)
    • 更新过程
    1. 修改data,触发setter,(在getter被侦听）
    1. 重新执行render函数，生成newVnode
    1. patch（vnode,newVnode)
    • 异步渲染
    1. 回顾$nextTick
    1. 汇总data的修改，一次性更新视图
    1. 减少DOM操作次数，提高性能
     

    前端路由原理

    url的组成
    协议，域名，host(域名+端口），文件名，查询（？a=100&b=20),hash(#/aa/bb)
     

    项目设计

    状态设计
    1.内容数据化
    2.数据结构化和可扩展性
    3.程序的可遍历，可迭代
    内容和功能操作要区分
    条目啊，创建日期啊，id标识等就是内容
    输入，删除，新增，这些就是功能操作
    组件设计
    数据管理（组件1）
    视图显示（组件2）
    react to do list
    vue 购物车
     

    vue3

    let a =1
let b = a*2
//  b 会因为a的变化而自动响应式的变化。
使用
    proxy 代理 语法实现响应式数据
    优点：检测到代理对象属性的动态添加和删除，可以监听到数组的下标和length属性的变更。
    setup函数
    ref函数
    reactive 函数