您好,欢迎访问一九零五行业门户网

关于Vuejs技术栈的知识汇总

前言上家公司的项目主要是使用jquery和angular1,然后自己学了react,没想到来到这家公司突然开始做vue,不过vue还是挺容易上手的。下面是vue技术栈的一些总结,都是来自官网,主要是自己对vue技术栈知识点的一些整理,因此此文很水,建议阅读我的上一篇文章vuejs技术栈从cli到打包上线实战全解析
vue独立构建和运行时构建有两种构建方式,独立构建和运行构建。它们的区别在于前者包含模板编译器而后者不包含。
模板编译器的职责是将模板字符串编译为纯javascript的渲染函数。如果你想要在组件中使用template选项,你就需要编译器。
生命周期具体查看官网的流程图,要注意的是created和mounted区别,created是vm实例已创建但未挂载,因此一些dom操作应该放在mounted中。异步请求放在created或者mounted暂时没发现什么区别,如您知道有什么区别,请评论指出。
计算(computed)属性模板内的表达式不应该包含太多的逻辑,对于任何复杂逻辑,都应当使用计算属性
computed属性和methods不同的是计算属性是基于它们的依赖进行缓存的。
computed属性和computed属性,通常更好的想法是使用computed属性而不是命令式的watch回调。虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的watcher。当你想要在数据变化响应时,执行异步操作或开销较大的操作,这是很有用的。
数组更新检测数组的变异方法(mutation method,会改变被这些方法调用的原始数组)会触发视图更新,有以下七个:
push() pop() shift() unshift() splice() sort() reverse()
当使用非变异方法时,可以用新数组替换旧数组,或者使用vue.set方法。
对象更新可以用新对象替换旧对象,或者使用vue.set方法
vue.set(vm.someobject, 'foo', 'bar') this.someobject = object.assign({}, this.someobject, { a:1, b:2 })
事件处理器vue.js为v-on提供了事件修饰符和按键修饰符
表单控件绑定可以用v-model指令在表单控件元素上创建双向数据绑定。常见修饰符有.lazy、.number、.trim。
也可以使用自定义事件的表单输入组件。
组件vue组件的api来自三部分:props,events和slots:
props允许外部环境传递数据给组件
events允许组件触发外部环境的副作用
slots允许外部环境将额外的内容组合在组件中。
1)组件的data属性必须是函数
2)父子组件
在vue.js中,父子组件的关系可以总结为 props down, events up 。父组件通过props向下传递数据给子组件,子组件通过events给父组件发送消息。
prop是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
另外,每次父组件更新时,子组件的所有prop都会更新为最新值。这意味着你不应该在子组件内部改变prop。如果你这么做了,vue会在控制台给出警告。
为什么我们会有修改prop中数据的冲动呢?通常是这两种原因:
1.prop作为初始值传入后,子组件想把它当作局部数据来用;
2.prop作为初始值传入,由子组件处理成其它数据输出。
对这两种原因,正确的应对方式是:
1.定义一个局部变量,并用prop的值初始化它:
props: ['initialcounter'], data: function () {   return { counter: this.initialcounter } }
2.定义一个计算属性,处理prop的值并返回。
props: ['size'], computed: {   normalizedsize: function () {     return this.size.trim().tolowercase()   } }
注意在javascript中对象和数组是引用类型,指向同一个内存空间,如果prop是一个对象或数组,在子组件内部改变它会影响父组件的状态。
3)非父子组件
有时候两个组件也需要通信(非父子关系)。在简单的场景下,可以使用一个空的vue实例作为中央事件总线。在复杂的情况下,我们应该考虑使用专门的状态管理模式。
4).sync修饰符
在一些情况下,我们可能会需要对一个prop进行『双向绑定』。
2.0中移除了.sync,vue2.3.0+又将其添加回来了,但是这次它只是作为一个编译时的语法糖存在,它会被扩展为一个自动更新父组件属性的v-on侦听器。如下代码
<comp :foo.sync="bar"></comp>
会被扩展为:
<comp :foo="bar" @update:foo="val => bar = val></comp>
当子组件需要更新foo的值时,它需要显式地触发一个更新事件:
this.$emit('update:foo', newvalue)
5)使用slot进行内容分发
作用域插槽:接收从子组件中传递的prop对象。作用域插槽更具代表性的用例是列表组件,允许组件自定义应该如何渲染列表每一项
6)动态组件、is特性和keep-alive指令
7)子组件索引
尽管有props和events,但是有时仍然需要javascript中直接访问子组件。为此可以使用ref为子组件指定一个索引id。
异步更新队列虽然 vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 dom,但是有时我们确实要这么做。为了在数据变化之后等待 vue 完成更新 dom ,可以在数据变化之后立即使用 vue.nexttick(callback) 。这样回调函数在 dom 更新完成后就会调用。
过渡效果vue在插入、更新或者移除dom时,提供多种不同方式的应用过渡效果。包括以下工具:
在css过渡和动画中自动应用class
可以配合使用第三方css动画库,如animate.css
在过渡钩子函数中使用javascript直接操作dom
可以配合使用第三方javascript动画库,如velocity.js
1)单元素/组件的过渡
vue提供了transition的封装组件,在下列情形中,可以给任何元素和组件添加过渡
条件渲染(使用v-if)
条件展示(使用v-show)
动态组件
组件根节点
2)多个元素的过渡
对于原生标签可以使用 v-if/v-else
3)多个组件的过渡
多个组件的过渡我们可以使用动态组件。
4)列表过渡
render函数和jsx自定义指令和angular的指令类似,主要操作dom,下面是一个滚动加载的指令,holder暂时没想到什么更好的处理方法:
let scrollcallback = function (callback) {   let windowh = window.innerheight   let getdocumentheight = function () {     var body = document.body     var html = document.documentelement     return math.max(       body.offsetheight,       body.scrollheight,       html.clientheight,       html.offsetheight,       html.scrollheight     )   }   let scrollh = document.documentelement.scrolltop || document.body.scrolltop   if (windowh + scrollh >= getdocumentheight() - (this.holder || 20)) {     callback()   } } let callbackwarpped export default {   bind (el, binding, vnode) {     let holder     if (vnode.data && vnode.data.attrs && vnode.data.attrs['scroll-placeholder']) {       holder = parseint(vnode.data.attrs['scroll-placeholder'])     } else {       holder = 20     }     callbackwarpped = scrollcallback.bind({el, holder}, binding.value)     window.addeventlistener('scroll', callbackwarpped, false)   },   unbind: function () {     window.removeeventlistener('scroll', callbackwarpped, false)   } }
混合混合是一种灵活的分布式复用vue组件的方式。混合对象可以包含任意组件选项。以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。
插件1)创建插件
vue.js的插件应当有一个公开方法install。这个方法的第一个参数是vue构造器 , 第二个参数是一个可选的选项对象。
2)使用插件
通过全局方法vue.use()使用插件:
// 调用 `myplugin.install(vue)` vue.use(myplugin)
也可以传入一个选项对象:
vue.use(myplugin, { someoption: true })
vue-router两种导航方式1)router-link声明式导航
<router-link to="/foo">go to foo</router-link>
router-link对应的路由匹配成功,将自动设置class属性值.router-link-active。
2)编程式导航
// 字符串 router.push('home') // 对象 router.push({ path: 'home' }) // 命名的路由 router.push({ name: 'user', params: { userid: 123 }}) // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }})
重命名(redirect)和别名(alias)两种路由模式vue-router默认hash模式,也可以设置为路由的history模式。
导航钩子vue-router提供的导航钩子主要用来拦截导航,让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的。
路由meta一个路由匹配到的所有路由记录会暴露为$route对象(还有在导航钩子中的route对象)的$route.matched数组。因此,我们需要遍历$route.matched来检查路由记录中的meta字段。
过渡动效router-view是基本的动态组件,所以我们可以用transition组件给它添加一些过渡效果。
数据获取有时候,进入某个路由后,需要从服务器获取数据。例如,在渲染用户信息时,你需要从服务器获取用户的数据。我们可以通过两种方式来实现:
导航完成之后获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。
导航完成之前获取:导航完成前,在路由的enter钩子中获取数据,在数据获取成功后执行导航。
滚动行为(scrollbehavior)注意: 这个功能只在html5 history模式下可用。
路由懒加载当打包构建应用时,javascript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
结合vue的异步组件和webpack的code splitting功能,轻松实现路由组件的懒加载。
const foo = resolve => require(['./foo.vue'], resolve) const router = new vuerouter({   routes: [     { path: '/foo', component: foo }   ] })
router-link可以设置tag、append、active-class、exact等属性
有时候我们要让 激活时的css类名 应用在外层元素,而不是a标签本身,那么可以用router-link渲染外层元素,包裹着内层的原生a标签:
<router-link tag="li" to="/foo">   <a>/foo</a> </router-link>
在这种情况下,a将作为真实的链接(它会获得正确的 href 的),而激活时的css类名则设置到外层的li。
router构造配置routes、mode、base、linkactiveclass、scrollbehavior
对组件注入1)注入的属性
通过在vue根实例的router配置传入router实例,下面两个属性成员会被注入到每个子组件。
$router:router实例
$route:当前激活的路由信息对象。这个属性是只读的,里面的属性是immutable(不可变)的,不过你可以watch(监测变化)它。
2)允许的额外配置:beforerouteenter、beforerouteleave
vuexstate1)单一状态树
vuex使用单一状态树--是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源(ssot)』而存在。这也意味着,每个应用将仅仅包含一个store实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。
2)在vue组件中获得vuex状态
最好在根实例中注册store选项,该store实例会注入到根组件下的所有子组件中,且子组件能通过this.$store访问到。而不是在每个需要使用state的组件中需要频繁地导入。
3)mapstate辅助函数
当一个组件需要获取多个状态时候,可以使用mapstate辅助函数帮助我们生成计算属性,这样可以简化代码书写。mapstate函数会返回一个对象,然后可以使用对象展开运算符将它与局部计算属性混合使用。
4)不要滥用vuex
使用vuex并不意味着你需要将所有的状态放入vuex。虽然将所有的状态放到vuex会使状态变化更显式和易调试,但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件,最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。
gettersgetters用来从store中的state中派生出一些状态,例如对列表进行过滤并计数:
computed: {   donetodoscount () {     return this.$store.state.todos.filter(todo => todo.done).length   } }
getters可以认为是store的计算属性。和state类似,有mapgetters辅助函数。
mutations更改vuex的store中的状态的唯一方法是提交mutation。vuex中的mutations非常类似于事件:每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受state作为第一个参数
1)提交载荷(payload)
你可以向store.commit传入额外的参数,即mutation的载荷(payload):
// ... mutations: {   increment (state, n) {     state.count += n   } } store.commit('increment', 10)
2)mutations需遵守vue的响应规则
3)使用常量替代mutation事件类型
4)mutation必须是同步函数
5)在组件中提交mutations
你可以在组件中使用this.$store.commit('xxx')提交mutation,或者使用mapmutations辅助函数将组件中的methods映射为store.commit调用(需要在根节点注入store)。
actionsactions类似于mutation,不同在于:
actions提交的是mutation,而不是直接变更状态。
actions可以包含任意异步操作。
1)在组件中分发action
你在组件中使用this.$store.dispatch('xxx')分发action,或者使用mapactions辅助函数将组件的methods映射为store.dispatch调用(需要先在根节点注入store)
2)组合actions
action通常是异步的,那么如何知道action什么时候结束呢?更重要的是,我们如何才能组合多个action,以处理更加复杂的异步流程?
首先,你需要明白store.dispatch可以处理被触发的action的回调函数返回的promise,并且store.dispatch仍旧返回promise。
使用async/await会更加简单:
// 假设 getdata() 和 getotherdata() 返回的是 promise actions: {   async actiona ({ commit }) {     commit('gotdata', await getdata())   },   async actionb ({ dispatch, commit }) {     await dispatch('actiona') // 等待 actiona 完成     commit('gototherdata', await getotherdata())   } }
modules由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store对象就有可能变得相当臃肿。
为了解决以上问题,vuex允许我们将store分割成模块(module)。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:
const modulea = {   state: { ... },   mutations: { ... },   actions: { ... },   getters: { ... } } const moduleb = {   state: { ... },   mutations: { ... },   actions: { ... } } const store = new vuex.store({   modules: {     a: modulea,     b: moduleb   } }) store.state.a // -> modulea 的状态 store.state.b // -> moduleb 的状态
插件vuex的store接受plugins选项,这个选项暴露出每次mutation的钩子。vuex插件就是一个函数,它接收store作为唯一参数。
严格模式开启严格模式,仅需在创建store的时候传入strict:true
在严格模式下,无论何时发生了状态变更且不是由mutation函数引起的,将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。
不要在发布环境下启用严格模式!严格模式会深度监测状态树来检测不合规的状态变更--请确保在发布环境下关闭严格模式,以避免性能损失。
表单处理测试热重载以上就是关于vuejs技术栈的知识汇总的详细内容。
其它类似信息

推荐信息