computed和watch
- computed是计算属性,也就是依赖某个值或者props通过计算得来得数据;
- computed的值是在getter执行之后进行缓存的,只有在它依赖的数据发生变化,会重新调用getter来计算;
- 不支持异步,当computed内有异步操作时无效,无法监听数据的变化;
- watch监听引用类型拿不到oldVal
- 不支持缓存,数据变直接会触发相应的操作;
- 监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
- 支持异步操作;
- 当多个属性影响一个属性的时候,建议用computed
- 当一个值发生变化之后,会引起一系列的操作,这种情况就适合用watch
- watch是监听器,可以监听某一个数据,然后执行相应的操作
点击事件
- 点击时间传$event可以把event参数传进去
- event是原生的
- 事件被挂载到当前元素
事件修饰符
- .stop阻止单击事件继续传播
- .prevent提交事件不再重载页面
- .stop.prevent可以串联
- .ctrl 即使按了Alt或者shift也会触发
- .ctrl.exact有且只有Ctrl被按下才会触发
- .exact没有任何系统修饰符被按下才能触发
表单
- v-modeal.trim 截取前后空格
- v-model.lazy 输入完之后才会加载
- v-model.number转换成数字
组件使用
- props $emit
- 自定义事件
- event.on on的事件必须在一个公共的实例上,我们可以使用一个空的 Vue 实例作为中央事件总线。 event.$off解绑
- 单个组件的生命周期
- beforeCreate 生成Vue实例,事件和生命周期初始化
- created data初始化,计算属性事件回调,但dom树还未挂载
- beforeMount将虚拟dom替换成真正的dom
- mounted挂载完成,dom树渲染到页面,可进行dom操作
- beforeUpdate数据有更新被调用
- updated 虚拟dom重新渲染,以最小dom开支来重新渲染dom
- beforeDestroy 清除自定义事件、定时器等等
- destroyed组件已销毁
父子组件生命周期执行顺序
- 父created、子created、子mounted、父mounted
- 父before update、子before update、子updated、父updated
Vue高级特性
- 自定义v-model
Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: ` <input type="checkbox" v-bind:checked="checked" v-on:change="$emit('change', $event.target.checked)" > //使用 <base-checkbox v-model="lovingVue"></base-checkbox> ` })
- $nextTick
- 页面渲染时会将data的修改做整合,多次data修改只会渲染一次
- data改变后,DOM不会立刻渲染
- $nextTick会在DOM渲染之后触发,已获取最新DOM节点
- slot
- 基本使用 组件里的内容直接插入slot标签中
- 作用域插槽 使用v-slot="slotProps"来获取带子组件传过来的数据
- 具名插槽 使用v-slot:header来插入指定的插槽中
- 动态组件
- 使用 <component :is="NexTickName" 来渲染NexTickName指定的组件
- 异步组件
- 使用的时候再加载
- FormDemo:()=>import('../FormDemo')
- keep-alive
- 缓存组件
- 频繁切换,不需要重复渲染
- mixin
- 多个组件有相同的逻辑,抽离出来
- 来源不明确,阅读困难
- 命名重复问题
- mixin和组件可能出现多对多的关系,复杂度高
- Vuex
- state
- getters
- action
- mutation
- 用于Vue组件
- dispatch
- commit
- mapState
- mapGetters
- mapActios
- mapMutations
- Vue-router使用
- 路由模式 hash和H5history
- 路由配置 动态路由和懒加载
- 动态路由 /user/:id 使用$router.params.id
- 懒加载 compo nent:()=>import(/* webpackChunkName:"navigator" */ './Nav')
4-1
网友评论