4、为何Vue采用异步渲染?（vue解04）

最新推荐文章于 2023-09-11 15:11:30 发布

早日朝成

最新推荐文章于 2023-09-11 15:11:30 发布

阅读量3.9k

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/weixin_44683255/article/details/104538728

版权

VUE 专栏收录该内容

33 篇文章 7 订阅

订阅专栏

Vue中的渲染方式个人总结可分为4种:

原有模板语法，挂载渲染
使用render属性，createElement函数直接渲染
使用render属性，配合组件的template属性，createElement函数渲染
使用render属性，配合单文件组件，createElement函数渲染
方式一
原有模板语法，挂载渲染：就是对使用Vue标签语法的hmtl进行渲染。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TestVue</title>
</head>
<body>
<div id="app">
    <input v-model="message">
    <p>Message is: {{ message }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script type="text/javascript">
    var v = new Vue({
        el: '#app',
        data: {
            message: '这是内容'
        }
    });
</script>
</html>

特点
当页面返回时html中的v-model等属性并没有被渲染，保持不变发给客户端，客户端直到加载了Vue，创建了实例之后才会将这些标识渲染出来。

v-if显示后消失或消失后显示造成跳变
这种方式的缺点是明显的：浏览器第一时间无法识别这些标识！这会使得在某些情况下出现奇怪的现象，下面我修改代码以做演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TestVue</title>
</head>
<body>
<div id="app">
    <template v-if="type === '1'">
        <div style="width: 400px;height: 300px;background-color: blue;"></div>
    </template>
    <div style="width: 400px;height: 200px;background-color: red;"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script type="text/javascript">
    var v = new Vue({
        el: '#app',
        data: {
            type: '1'
        }
    });
</script>
</html>

可以看到上面的第一个div在type为1时应该显示，但是它在页面初始加载是不会显示的，一个html并没有标签，整个标签会被跳过，那么这个页面展示的结果就会有一个一瞬间的跳变。

这个过程非常短，但是人眼是绝对识别得到的，在谷歌浏览器下使用Ctrl+Shift+R，360浏览器下使用Ctrl+F5强制不使用缓存加载页面我们就能看到这个跳变了！

注意另一种写法也会有跳变情况：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TestVue</title>
</head>
<body>
<div id="app">
    <div v-if="type === '1'" style="width: 400px;height: 300px;background-color: blue;"></div>
    <div style="width: 400px;height: 200px;background-color: red;"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script type="text/javascript">
    var v = new Vue({
        el: '#app',
        data: {
            type: '2'
        }
    });
</script>
</html>

解释：div默认不会识别v-if默认显示，但是tpye为2，Vue加载后隐藏了该div，造成跳变。

如何解决跳变问题？
使用下面所有方法都可以解决，思路是用render函数进行渲染，而目标div内不含任何内容，也就是先什么都不显示，然后渲染出来正确的html，自然不会有跳变。

方式二
使用render属性，createElement函数直接渲染：原本无html，通过JavaScript 的完全编程的能力生成页面。

实例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TestVue</title>
</head>
<body>
<div id="app">
</div>
</body>
<script src="js/vue.js"></script>
<script type="text/javascript">
    var v = new Vue({
        el: '#app',
        data: {
            message: '这是内容'
        },
        render: function (createElement) {
            return createElement('p', 'Message is:' + this.message)
        }
    });
</script>
</html>

这里目标div内初始时没有任何内容，使用render方法生成内容，这里我没有渲染出v-model的效果，因为实现起来比较复杂，要用到组件，具体参考官网渲染函数 & JSX，Vue 的模板实际是就是被编译成了 render 函数。

这里render不要使用ECMAScript6语法如下：

render: h => h(‘p’, this.message)
因为在ECMAScript6语法中，这里的this会指向[object Window]，这个this.message是获取不到值的，而在上面一个的例子中this会指向当前Vue实例。

特点
极少会使用的方式，只适合一些细节渲染，虽完全控制输出，但不够直观，实现复杂，远不及模板标记语法：让Vue去帮我们编译渲染。

方式三
使用render属性，配合组件的template属性，createElement函数渲染。

相比于上一个方式，加入组件，利用template属性，更为直观，同样是原本无html，通过render函数渲染。

实例代码：

TestVue

** 这里渲染组件时的渲染的内容会覆盖原

，而不是在其之下生成子节点。

特点
动态渲染，并且通过组件实现了模块分离，但是html模板被包在````里，使用不方便，IDE无法高亮代码，不适合大型项目。

下面是官网上对于这种方式的描述：

全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复（上面我用的是局部注册组件，甚至组件和实例不能分文件）
字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的
不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug (formerly Jade) 和 Babel
方式四
说了前三种方式，其实只是一步步引出第四种方式：使用render属性，配合单文件组件，createElement函数渲染。

这种方式是绝大部分Vue项目（官方脚手架就是采用该渲染方式）的渲染方式。

在理解这一部分内容之前，你需要有webpack、vue-loader的知识：

1、webpack是核心，将组件文件打包，配合loader解析文件。

2、vue-loader是vue单文件组件的核心，负责解析.vue文件。

webpack以及loader
webpack，一种打包文件工具，配合一些插件可以模块化文件的打包处理等，我也是边学边做，自行百度了解。

loader，webpack非常常用的属性，让你能配合各种loader随意加载各种东西，看下官网给出的解释：

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

比如这里我们有.vue模块组件，我们要在另一个文件中import App from './App.vue’该如何做到，我一步步讲。

实现步骤
我是使用命令的方式先打包出一个目标文件，再运行服务器，好像可以写到package.json的’scripts’字段里做一个步骤的简化，我没试，还是最简单的方式吧。

1、我是用命令行打包所以先全局安装webpack，注意webpack4.0+版本后要附带安装一个webpack-cli或是webpack-command其中之一，我是安的webpack-command：

npm install webpack webpack-command -g

2、因为babel-loader、vue-loader等必须要有webpack，好像不在项目中载入webpack也不行，所以进入项目根目录（node_modules文件夹所在目录），npm install webpack --save在项目中加载webpack。

3、接着，再把需要的loader加载一下，首先是vue-loader，是解析.vue文件的核心loader，接着是babel-loader，它是用来修改不兼容的javaScript语法的loader，用来处理.vue文件中的，还有处理的css-loader、vue-style-loader，还有vue-loader强制附带个vue-template-compiler，我不知道是干嘛的。

加载babel：npm install babel-loader babel-core babel-preset-env --save

加载其他必要的：npm install vue-loader css-loader vue-style-loader vue-template-compiler --save

4、在根目录下新建一个名为dist的文件夹存放生成的文件。

5、在根目录下新建文件App.vue，这就是单文件组件了，而且是根组件，添加代码如下：

Message is: {{ message }}

6、在根目录下新建webpack打包入口文件entry-client.js，添加代码如下：

import Vue from ‘vue’ //注意在静态编译时全都使用import，不要使用require，无法生效
import App from ‘./App’ //注意在静态编译时全都使用import，不要使用require，无法生效

const app = new Vue({
components: {
App
},
render: h => h(App)
});

app.$mount(’#app’);
7、在根目录下新建一个名为build的文件夹，在该文件夹内创建一个文件名为webpack.config.js的文件作为webpack配置文件，代码如下：

const path = require(‘path’)
const VueLoaderPlugin = require(‘vue-loader/lib/plugin’)

module.exports = {
entry: {
‘client.bundle’: ‘…/entry-client.js’,
},
output: {
path: path.resolve(__dirname, ‘…/dist’), //生成文件放到dist目录下
filename: ‘[name].js’
},
mode: ‘development’, //开发模式，有错误vue会在控制台提示
resolve: {
//加了下面这项我们就能将import App from ‘./App.vue’ 省略为import App from ‘./App’
extensions: [’.js’, ‘.vue’, ‘.json’]
},
//设置loader以及插件，可参考vue-loader官网
module: {
rules: [
{
test: /.vue $KaTeX parse error: Expected 'EOF', got '}' at position 53: \dotsr' }̲, /\dots$ /,
loader: ‘babel-loader’
},
// 它会应用到普通的 .css 文件
// 以及 .vue 文件中的 <style> 块
{
test: /.css$/,
use: [
‘vue-style-loader’,
‘css-loader’
]
}
]
},
plugins: [
// 请确保引入这个插件来保证vue-loader的使用
new VueLoaderPlugin()
]
};
8、命令行进入build文件夹，输入命令webpack打包文件，然后就可以在dist目录下看到生成的client.bundle.js目标文件了。

9、在根目录下创建测试文件index.html，添加代码如下：

TestVue

特点单文件组件，模块化，动态渲染，典型的单页面应用

作者：黯伢
链接：https://www.jianshu.com/p/691296af0115
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

早日朝成

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
4、为何Vue采用异步渲染?（vue解04）

Vue中的渲染方式个人总结可分为4种:原有模板语法，挂载渲染使用render属性，createElement函数直接渲染使用render属性，配合组件的template属性，createElement函数渲染使用render属性，配合单文件组件，createElement函数渲染方式一原有模板语法，挂载渲染：就是对使用Vue标签语法的hmtl进行渲染。<!DOCTYPE htm...
复制链接

扫一扫