Vue2.0 温故而知新1

高高i

已于 2022-08-31 15:45:42 修改

阅读量136

点赞数 1

分类专栏： Vue2.0 文章标签：前端 vue.js 开发语言

于 2022-08-17 16:34:17 首次发布

本文链接：https://blog.csdn.net/m0_44963501/article/details/126380329

版权

Vue2.0 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue核心

Vue是什么

数据---->界面

动态构建用户界面渐进式 Js框架

逐渐递进

自底向上逐层

13年：Angular 启发。seed Vue0.6

14年：正式对外 0.8

15年：正式发布 1.0

16年： 2.0

20年： 3.0

Vue的特点

组件化
提高代码复用率，代码更好的维护
声明式
无需直接操作DOM,提高开发效率
命令式编码：每一步都需要一行代码。例如js
声明式编码：指令。来实现共呢个
1. 虚拟DOM➕Diff算法
  尽量复用DOM节点
  
  虚拟DOM:
  树形结构的Js对象，描述真是DOM结构，例如：
```
var VNode = {
    tag:'div',
    attrs:{
        id:'wrap'
    },
    children:[
        {
            tag:'p',
            text:'Hello world!',
            attrs:{
                class:'title',
            }
        }
    ]
}
```
  优点：
  减少DOM操作，降低浏览器性能消耗
  
  Diff算法
  减少回流和重绘，刷新被更新部分
  比较虚拟DOM

Vue官网实用

Vue官网

学习 -----风格指南：编码/起名规范

学习 -----cookbook：技巧

资源列表----Awesome Vue：一些好的官网库

MVVM

M（model）模型：data

V（view）视图：模板、Dom

VM（view model）视图模型：Vue实例对象

数据代理

数据代理：一个对象可代理另一个对象的属性操作

当new Vue，就通过 proptype 给vm 加了data属性，

data里面的元素加了 get 和 set

 const vm = new Vue({
  el: '#app',
  data:{
    test:'123'
  },
})
console.log(vm);

vue的双向绑定原理：
vue数据的双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其核心就是通过Object.defineProperty()方法设置set和get函数来实现数据的劫持，在数据变化时发布消息给订阅者，触发相应的监听回调。也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

Object.defineProperty()

Object.defineProperty(对象名,"参数名",{
  enumerable:true,//控制属性是否可枚举
  writable:true,//是否可修改
  configurable:true,//是否可被删除
  get:()=>{ // 有被读取，被调用，且返回
    return 
  },
  set:()=>{ // 被修改，且收到
    return 
  },
})

消息订阅器 Dep ,主要收集订阅者，当 Observe监听到发生变化，就通知Dep 再去通知Watcher去触发更新

订阅者Watcher，每个Watcher都绑定一个更新函数，Watcher可以收到属性的变化通知并执行相应的函数，从而update方法更新视图

事件处理

使用v-on:[事件名]或 @[事件名] 绑定事件

事件修饰符

.prevent 阻止默认事件

.once 事件只触发一次

.stop 阻止冒泡

.capture 事件的默认行为立即执行，无须等待事件回调执行完毕

.passive 先默认行为

修饰符可以连续写，比如： @click.prevent.stop=“事件名”

@scroll 滚动条 @wheel 鼠标-滚轮

键盘事件

按键别名

.enter .esc .space .delete(退格/删除）。。。。

计算属性

computed

缓存：根据某个值产生对应的变化，computed具有缓存性，当无关值变化时，不会引起computed声明值的变化。产生一个新的变量并挂载到vue实例上去。

不能异步，因为要return

computed:{

        对象名:{
                get(){ //被读
                        return XXX
                      } 
                set(value){ //被改
                        

                        
                      }

               },

        对象名2(){ //   简写
                    return XXX
                }
}