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>
网友评论