深入|深入 vue
一、原理
1.渲染
class Cue {
constructor(options) {
this.$el = document.querySelector(options.el);
this.$data = https://www.it610.com/article/options.data;
this._render();
}_render() {
const renderEle = node => {
Array.from(node.childNodes).forEach(el => {
switch (el.nodeType) {
case document.ELEMENT_NODE: //1
renderEle(el);
break;
case document.TEXT_NODE: // 3
el.data = https://www.it610.com/article/el.data.replace(/{/{/w+/}/}/g, str => {
const name = str.substring(2, str.length - 2);
return this.$data[name];
});
}
});
};
renderEle(this.$el);
}
}const cm = new Cue({
el: "#root",
data: {
name: "cherries",
age: 18
}
});
2.双向绑定
//v-model===:value + @input
二、computed 计算属性
- 缓存: 只在 data 变化时重新计算 提高性能
- 可读可写
computed: {
// name() {},
name: { // 命名和 data 中的不能一样
get() {
},
set() {
}
}
}
三、watch 监听值得变化(注意: 不要在 watch 中修改数据)
watch: {
name() {}, // 名字和监听的变量名称一样
'obj.key'() {},}vm.$watch('json', (newVal, oldVal) => {}, { deep: true }) // deep 是否深层监视
推荐阅读
- 一个人的旅行，三亚
- 一个小故事，我的思考。
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量
- 开学第一天（下）
- 一个人的碎碎念
- 2018年11月19日|2018年11月19日 星期一 亲子日记第144篇
- 遇到一哭二闹三打滚的孩子，怎么办┃山伯教育
- 第326天
- Y房东的后半生14
- 奔向你的城市