vue 相关
渐进式框架
参考于《深入浅出Vue.js》作者:刘博文
vue.js有足够的灵活性来适用于不同的需求,你可以根据自己的需求选择不同的使用方式
如果你已经有一个现成的服务端应用,也就是非单页应用,可以将Vue.js作为该应用的一部分嵌入其中,带来更加丰富的交互体验
如果希望将更多业务逻辑放到前端来实现,那么Vue.js的核心库及其生态系统可以满足你的各种需求,
如果要构建以一个大型应用, 就需要先搭建项目,配置一些开发环境。 Vue.js提供了一个命令行工具,它让快速初始化一个真实的项目工程变得非常简单
所谓的渐进式框架,就是把框架分层
最核心的部分是视图层渲染,往外是组件机制,这个基础还有路由机制,状态管理,构建工具,
也就是说你可以只用核心视图层渲染快速开发一些需求,也可以使用一整套全家桶来开发大型应用
MVVM
computed和watch
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值(有缓存)
v-if vs v-show
v-if
是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if
也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下,v-show
就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说,v-if
有更高的切换开销,而 v-show
有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show
较好;如果在运行时条件很少改变,则使用 v-if
较好。
生命周期
- 实例初始化之前
beforeCreate
- 实例创建完
created
- 实例挂载之前
beforeMount
- 实例挂载完成
Mounted
- 数据更新时
beforeUpdated
- 数据组件已经更新
updated
- 实例销毁前
beforeDestroy
- 实例销毁后
destroyed
Vuex
核心概念
- State: 提供一个响应式数据
- Getter: 借助Vue的计算属性computed 来实现缓存
- Mutaion: 更改state 方法
- Action: 触发mutation 方法
- Module: Vue.set动态添加state 到响应式数据中
辅助函数
Vuex 是通过什么方式提供相应式数据的
### $store是如何挂载到实例this上的呢
vue-route
每个url都对应着一个html文件 或者php 每次切换url 都需要我们页面的一个重新加载
诞生了单页面 只需要一个html就差不多可以满足我们的需求了 用户切换url 不在重新加载页面 而是根据url的变化执行相应的逻辑 数据通过接口的形式给我们