Vue渲染方式

作者: 黯伢 | 来源:发表于2018-07-27 17:55 被阅读0次

前言

所有代码运行Vue版本：2.5.16

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并没有<template>标签，整个标签会被跳过，那么这个页面展示的结果就会有一个一瞬间的跳变。

这个过程非常短，但是人眼是绝对识别得到的，在谷歌浏览器下使用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函数渲染。

实例代码：

<!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 MyComponent = {
        data () {
            return {
                message: '这是内容'
            }
        },
        template: `
        <div id="app">
            <input v-model="message">
            <p>Message is: {{ message }}</p>
        </div>
        `
    };

    var v = new Vue({
        el: '#app',
        components: {
            'my-component': MyComponent
        },
        render: function (createElement) {
            return createElement('my-component')
        }
        //ECMAScript6: render: h => h('my-component')
    });
</script>
</html>

这里渲染组件时的渲染的内容会覆盖原<div id="app"></div>，而不是在其之下生成子节点。

特点

动态渲染，并且通过组件实现了模块分离，但是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文件中的<script></script>，还有处理<style></style>的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，这就是单文件组件了，而且是根组件，添加代码如下：

<template>
    <div id="app">
        <input v-model="message">
        <p>Message is: {{ message }}</p>
    </div>
</template>

<script>
export default {
    data () {
        return {
            message: 'dsdsadasad'
        }
    }
}
</script>

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$/,
                loader: 'vue-loader'
            },
            // 它会应用到普通的 `.js` 文件
            // 以及 `.vue` 文件中的 `<script>` 块
            {
                test: /\.js$/,
                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，添加代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TestVue</title>
</head>
<body>
<div id="app">
</div>
</body>
<script type="text/javascript" src="dist/client.bundle.js"></script>
</html>

特点

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

Vue渲染方式

前言

方式一

特点

v-if显示后消失或消失后显示造成跳变

如何解决跳变问题？

方式二

特点

方式三

特点

方式四

webpack以及loader

实现步骤

特点

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读