Vue.JS
# Vue.JS
# diff算法&虚拟DOM
# 响应式
# 计算属性
# 注意事项
数组、对象 计算属性不能强制更新
# 原理
# 架构层面
# 脚手架
脚手架用于搭建项目时提供模板和相应配置，简化、规范项目开发流程。
# 写一个自己的脚手架
解析cli命令-操作文件（拷贝模板/编译项目/修改配置）
# 生命周期
# beforeCreated
# created
# mounted
# beforeDestroyed
# destroyed
# 数据流
# 单向数据流
# 父子组件传参
# prop
# emit
# 双向数据流
# v-model
<MySelector v-model="selectedItem"></MySelector>
or
<MySelector :item="selectedItem" @updateSelectedItem="selectedItem = $event" ></MySelector>
<!--MySelector.vue-->
<script>
export default{
model:{
prop:'item',
event:'updateSelectedItem'
},
props:{
item:Number
},
data(){
return {
selectedItem:0
}
},
methods:{
onChange(){
this.$emit('updateSelectedItem',this.selectedItem)
}
}
}
</script>
# .sync
<MyComponent :title.sync="doc.title" ></MyComponent>
or
<MyComponent :title="doc.title" @update:title="doc.title = $event" ></MyComponent>
<!--MyComponent.vue-->
<script>
export default{
props:{
title:String
},
methods:{
updateTitle(newTitle){
this.$emit('update:title', newTitle)
}
}
}
</script>
两者实际上都是v-bind与v-on的语法糖，v-model可以自定义事件名，而.sync的事件名 == "update:" + propName。注意，他们均不支持表达式。
# 双向数据流实例
现在有一个Setting页，内有一个上传图片并预览的组件，打开Setting页时该组件会显示从服务器上拉取的图片（通过父组件获取配置信息），保存配置时Setting页会将图片配置和其他配置一起提交到服务器。
于是，打开的时候，Setting页会先拉取数据，然后通过prop传递到图片组件；上传图片的时候，图片组件将新的数据提交给Setting页，Setting页再通过prop传递到图片组件；保存配置的时候，Setting页直接提交自己的数据。
# 复杂数据流
# 实例
现在有N个用v-for渲染的组件支持自定义的右键菜单，要求同时最多只能有一个组件点开右键菜单。
子组件有两种状态：显示/不显示，但组件间无法直接传递信息，需要借助于父组件。我们在父组件建立一个响应式的数据结构（例如数组），子组件接受prop决定是否能显示右键菜单，是否能显示的逻辑交由父组件判断。
如果子组件的contextmenu（显示菜单）事件触发，那么向父组件提交该事件，如果当前没有组件显示菜单（数组的值全为false），那么允许显示（该组件对应的值设为true），如果已经有别的了，那么先关闭当前菜单（将先前组件的值设为false），再显示新触发的菜单（该组件对应的值设为true）。
父组件可以通过设置false阻止菜单显示，但不能通过设置true显示菜单，true仅用于标记状态，原因是用户触发contextmenu时会有一个位置，获得位置才能正确显示右键菜单。