2020 vuejs 中组件实现

vuejs-logo.png

组件化

组件化是任何一个框架必须实现，如何将定义组件(js 对象)转化为 dom 对象，以及组件的属性转换为 dom 属性，这是每一个前端框架在设计时需要认真思考和设计的问题。

const vm= new Vue({
    el:'#root',
    data:{},
    props:{},
    methods:{},
    watch:{},
    computed:{},
    template:"...",
    components:{},
});

属性名	说明
el	用来加载 Vue 对象的元素
data	绑定的数据
props	用来接收外部数据的属性
methods	定义 Vue 对象内部使用的方法
watch	用于观察 Vue 对象内部资料的更新
computed	自动为内部数据计算过的属性
template	存放 Vue 对象编译后生成的模板
components	定义子元素

昨天写 react，今天朋友让我来谈谈 vue，个人对于 vue 了解并不多。先接触的 angular 随后是 react ，vue 是这两年市场推动不得不也看一看 vue。最近听了 Evan 关于 vue3 介绍，vue3 还是很吸引人，一堆提高性能的优化。

按作用域范围

区域性(具有作用域)注册组件

register_scope

其实渲染出来并不是 javascript 提供自定义组件而是一个 div

render_div_for_register_scope

所谓区域(作用域)注册中区域指的就是这些元素父级元素<div id="app">

    <div id="app">
        <zi-comp></zi-comp>
        <zi-comp></zi-comp>
        <zi-comp></zi-comp>
    </div>
    <div id="app2">
        <zi-comp></zi-comp>
    </div>

这样在 app2 作用域内是无法识别到在 app 作用域注册的组件 zi-comp

global_register_comp

关于组件中 data 的属性

这里有一个我们需要注意的，也是我们对 vue 设计理念有点 confusing 的。data 属性值是一个函数返回一个对象，而不是直接接收一个对象作为 data 的属性值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>Document</title>
</head>

<body>
    <div id="app">{{msg}}<zi-comp></zi-comp>
    </div>
    <script>
        Vue.component('zi-comp', {
            template: '<div class="comp">{{msg}}</div>',
            data: function () {
                return {
                    msg: "A custom component of Vue"
                }
            }
        });
        new Vue({
            el: "#app",
            data: {
                msg: 'A root msg of Vue'
            }
        });
    </script>
</body>

</html>

在组件中对 data 属性

            data: function () {
                return {
                    msg: "A custom component of Vue"
                }
            }

为什么会这样，可以简单思考一下，因为在 javascript 语言中没有大括号的作用域，最小作用域范围就是函数，如果没有通过 function 来限制数据 data 作用范围，data 就会把全局 data 覆盖掉，就这么简单。

大家可以通过运行下面的代码来观察问题，以及我们为什么要在 data 属性通过一个函数返回值来给 data 属性赋值的原因。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
    <style>
        .container {
            width: 100vw;
            height: 50vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .comp {
            height: 48px;
            background: dodgerblue;
            padding: 12px 24px;
            display: flex;
            color: white;
            font-size: 1.2em;
            margin-bottom: 6px;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div id="app" class="container">
        <zi-comp></zi-comp>
        <zi-comp></zi-comp>
        <zi-comp></zi-comp>
        <zi-comp></zi-comp>
        <zi-comp></zi-comp>
    </div>
    <script>
        var data = {
            count: 0
        }
        Vue.component('zi-comp', {
            template: '<div class="comp"><span>{{count}}</span> <button @click="count++">add</button> </div>',
            data: function () {
                return data;
            }
        });

        new Vue({
            el: "#app"
        });
    </script>
</body>

</html>

通过修改 zi-comp 的 data 属性，返回一个对象，这样 count 属性就不会覆盖外面属性，这时的 count 只属于该 zi-comp 组件实例化对象的 count。通过这个示例我想大家可能对为什么在 vue 的组件定义数据 data 属性时，需要提供函数然后在其中将数据对象返回原因了吧。

Vue.component('zi-comp', {
            template: '<div class="comp"><span>{{count}}</span> <button @click="count++">add</button> </div>',
            data: function () {
                return {
                    count:0
                };
            }
        });

模板文件

在 vue 中，避免大家在 vue 对象中的 template 写一些复杂 html 结构，vue 和其他框架一样提供在 vue 外部写 html 模板，然后在 vue 对象通过模板 id 来引用模板的方式来写模板。

<body>
    <div id="app">
        <zi-comp></zi-comp>
    </div>
    <script type="text/x-template" id="zi-comp">
        <div class="comp">A custom component of Vue!</div>
    </script>
    <script>
        //register
        Vue.component('zi-comp', {
            template: "#zi-comp"
        });
        new Vue({
            el: "#app"
        });
    </script>
</body>