Vue.js

最新推荐文章于 2024-06-12 08:41:10 发布

coo1__

最新推荐文章于 2024-06-12 08:41:10 发布

阅读量106

点赞数

分类专栏： Vue 文章标签：记录学习过程

本文链接：https://blog.csdn.net/weixin_43532970/article/details/101163311

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

学习框架如下：
Vue学习框架
加油！

一、渲染页面过程和原理

vue渲染过程

1.入口文件 mian.js

通过 ./build/webpack.base.conf.js 到定义Vue.js的入口文件

module.exports = {
  entry : {
    app: './src/main.js'   // 这里就定义了Vuejs的入口文件
  }
}

2.静态页面 index.html

在根目录下找到index.html，其中 <div id="app"></div> 就是将来会动态变化的内容。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>演示Vue的demo</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

这个 index.html 文件就是最外层的模板。

3. main.js 中的Vue定义

回头看 src/main.js 其内容如下：

import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'vue-resource';
Vue.use(VueResource);

Vue.config.productionTip = false
Vue.http.options.emulateJSON = true;

new Vue({
  el: '#app',   // 这里, #app 对应着 <div id=app></div>
  router,
  template: '<App/>',
  components: { App }  // 这里, App就是 ./src/App.vue
})

其中 el:'#app' 就是 index.html 中的 <div id='app'> 而上面的， App.vue 它会被 main.js 加载，App.vue 的内容如下：

<template>
  <div id="app">
		<router-view class="view"></router-view>
  </div>
</template>

<script>
</script>

<style>
</style>

在 App.uve 代码中的 <template> 就是第二层模板，可以认为该页面的内容。
在 <template> 中还有一个 <div id='app'> ... </div> 元素，这个元素跟 index.html 中的是同一个元素（暂且可以这么理解），而里面的 <router-view> 中的内容会被自动替换。

原理

Vue.js就是最典型的Ajax工作方式：只渲染更新的那部分页面。

浏览器的页面从来不会整体刷新，所有的页面变化都限定在 index.html 中的 <div id="app"></div> 代码中，index.html 代码和上面的一样，具体如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>演示Vue的demo</title>
  </head>
  <body>
    <div id="app"></div>   <!-- 都在这一行 -->
  </body>
</html>

所有的动作都可以靠url来触发，例如：
· /#/books_list 对应某个列表页
· /#/books/3 对应某个详情页
这个技术，就是依靠Vue.js的核心组件 vue-router来实现的。

Vue渲染原理就是构建DOM抽象语法树，基于抽象语法树生成虚拟节点，然后再将数据渲染到虚拟节点上，再将完成数据渲染的节点添加到document中刷新页面，呈现页面效果。
构建抽象语法树有三种方式：
1.基于绑定的实例化属性el和$mount()方法构建；
2.基于实例化属性template添加的模板构建；
3.基于ready()的参数构建。

这三种构建方式的优先级：render() > template > el

本质上的el与template与render()函数的参数都是一个原理，通过el就是将el指向的元素的DOM模型的outerHTML属性值拿到，outerHTML属性值与template的形式完全一样就是html文本的字符串形式；然后将这个字符串形式的html文本转换成js对象模型，render()函数中使用的就直接是js对象模型，接着通过js对象模型所表达的html结构转换成AST(抽象语法树)用于构建虚拟节点VNode；render()函数再在这个虚拟节点上渲染数据，完成数据渲染后就添加到html文档中渲染到页面。