vue篇——vue原理以及实现网站首页 技术教程

vue篇——vue原理以及实现

雨幕下的漫步 2024-09-01 00:01:04

简介vue篇——vue原理以及实现

vue

官网解释Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，简单易学、双向数据绑定、组件化。数据和结构的分离、虚拟DOM、运行速度快。链接
它有以下的特性：1.轻量级的框架；2.双向数据绑定；3.指令；4.插件化。
优点：

简单：官方文档很清晰，轻量级框架学习起来很简单。
快速：异步批处理方式更新 DOM。
组合：用解耦的、可复用的组件组合你的应用程序。
强大：表达式无需声明依赖的可推导属性 (computed properties)。
对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

缺点：

新生儿：Vue.js是一个新的项目，没有angular那么成熟，没有React那样的丰富。
影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。不支持IE8，需要做浏览器适配

Vue 的两个核心功能

声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

.
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
声明式编程(英语zhidao：Declarative programming)是一种编程范型，与命令式编程相对立。它描述目标性质，让计算机明白目标，而非流程。声明式编程不用告诉电脑问题领域，从而避免随之而来的副作用。而指令式编程专则需要用算法来明确的指出每一步该怎么做。

响应式：
Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty中的访问器属性中的 get和 set方法，data 中声明的属性都被添加了访问器属性，当读取 data 中的数据时自动调用 get 方法，当修改 data 中的数据时，自动调用 set 方法，检测到数据的变化，会通知观察者 Wacher，观察者 Wacher自动触发重新render 当前组件（子组件不会重新渲染）,生成新的虚拟 DOM 树，Vue 框架会遍历并对比新虚拟 DOM 树和旧虚拟 DOM 树中每个节点的差别，并记录下来，最后，加载操作，将所有记录的不同点，局部修改到真实 DOM 树上。

原理

解释
vue是一个MVVM 渐进式框架，MVVM是vue的设计模式，在vue框架中数据会自动驱动视图。
View是视图，就是DOM；对应视图也就是HTML部分–代表UI组件，它负责将数据模型转化成UI展现出来。 Model是模型，就是vue组件里的data，或者说是vuex里的数据；–代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。 ViewModel–监听模型数据也就是data的的改变和控制视图行为、处理用户交互，简单理解就是一个同步View和Model的对象，连接Model和View。

总结
在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewMode进行交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上。
ViewModel通过双向数据绑定把View层和Model层连接了起来，而View和Model之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理。

初次渲染过程

解析模板为render函数（一般在开发环境已经完成，vue-loader）
触发响应式，监听data属性gettersetter(模板中使用到的变量会触发getter)
执行render函数（触发getter），生成vnode，patch(elem,vnode)渲染到页面上

如何更新
修改data的数据，触发setter（此前data数据在getter中已被监听）
重新执行render函数，生成newVnode(新的虚拟dom)
使用 patch(vnode,newVnode)更新到页面上
vue原理
1、编译模板生成render函数，生成vdom
2、执行render函数，触发data中的getter
3、getter方法收集依赖（通俗点就是,在模板里面触发了哪个变量的getter,就把哪个变量观察起来）
4、在依赖中setter修改data中的数据的时候，Notify看下修改的那个数据是不是之前被观察起来的
5、如果是之前观察起来的，就重新渲染（ re-render），重新生成render函数,生成newVdom形成一个闭环

数据劫持
vue中的数据劫持代理指的是开发者调用或修改组件data里的某个属性时可以直接使用this.属性名，而不用写成微信小程序的写法，写成this.data.属性名来获取。
例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据劫持代理</title>
    <style>
      .defineP {
        .defineP {
          width: 200px;
          height: 200px;
        }
      }
    </style>
</head>
<body>
  <div>
  </div>
  <script src="./index.js"></script>
</body>
</html>

// vue的数据劫持代理
// 模拟data选项
let data = {
  username: 'curry',
  age: 33
}

// 模拟组件的实例
let _this = {
  test: "测试"
}

// 利用Object.defineProperty()  
// 这个方法接收三个参数:
// 1.属性所在的对象
// 2.属性的名字
// 3.一个描述符对象
for (let item in data) {
  // item是key  data[item]是value
  // console.log(item, data[item])
  Object.defineProperty(_this, item, {
      // get：用来获取扩展属性值  需要展开点击才能看得到
      get() {
          console.log('get()')
          // 扩展属性值依赖于data
          return data[item]
      },
      // set: 监视扩展属性的  只要已修改就调用
      set(newValue) {
          console.log('set()', newValue)
          // _this.username = newValue  不要在set方法中修改当前拓展属性值 会出现死循环
          data[item] = newValue
      }
  })
}
console.log(_this)
// 通过Object.defineProperty的get方法添加的扩展属性不能直接修改
_this.username = 'heihei'
console.log(_this.username)

hash

hash 变化会触发页面跳转，即浏览器的前进，后退
hash 变化不会刷新页面，SPA（单页面）必须的特点
hash 永远不会提交到server 端
vue中就是通过hash 的变化触发路由的变化，来触发视图的渲染

<body>
    <p>
        hash路由
    </p>
    <button id='btn'>
        修改 hash
    </button>
</body>

<script>
 //hash 变化 包括;
    //a. js 修改URL
    //b. 手动修改url的hash
    //c.浏览器的前进、后退
    
    //页面初次加载获取hash
    window.addEventListener ('DOMCintentLoaded',() =>{
        console.log('hash',location.hash)
    })
    //hash变化触发
     window.onhashchange = (event) =>{
        console.log('hash',location.hash)
    }
     //js 修改 url
     document.getElementById('btn').addEventListener('click',()=>{
         location.href = '#/user'
     })
</script>

history
h5 history 主要是通过 history.pushState 跳转和 window.onpopstate 监听页面的前进和后退

<body>
    <p>
       historyh路由
    </p>
    <button id='btn'>
        修改 url
    </button>
</body>

<script>
 
    //页面初次加载获取hash
    window.addEventListener ('DOMCintentLoaded',() =>{
        console.log('load',location.pathname)
    })

     //js 修改 url
     document.getElementById('btn').addEventListener('click',()=>{
         //pushState 有三个参数
         //第一个参数是个js对象，可以放任何的内容，可以在onpostate事件中（后面介绍）获取到便于做相应的、处理。
        //第二个参数是页面标题：目前所有浏览器都不支持,填空字符串即可
        //第三个参数是个字符串，就是保存到history中的url。
         let state= {
             title:'新页面'
         }
         history.pushState(state,'','user')
     })
    
    //监听浏览器的前进、后退
    window.onpostate = (event) => {
        console.log(event.state)  // {title:'新页面'}
        console.log(location.pathname)
    }
</script>