Vue 笔记

如果有组件缓存的话,created/mounted等钩子不会触发

popstate不会监听由js的replaceState和pushState触发的url/hash变更

Vue.extend返回的是一个构造器,如果配置里面有el选项则会立即编辑,否则在$mount的时候编译,这个特性还是有用的

之前乱用了nextTick,nextTick虽然有延迟执行,但是,目的还是在于获取dom更新之后的状态

vue的observable新增属性不可以通过this.observableObj.newAttr = val;js暂时没有对应的接口去获取到该事件,这个时候使用this.$set()

filter一般是状态无关的,做的是一些的固定格式化操作

独立构建:含义是,拥有完整的模版编译功能和运行时调用功能 运行时构建:含义是,只拥有完整的运行时调用功能

data配置的时候 以 _ 或 $ 开头的属性不会被Vue实例代理, 因为它们可能和Vue内置的属性、API 方法冲突。你可以使用例如vm.$data._property 的方式访问这些属性。 这是一个也算是不错特性,用来区分observable对象

data: (vm) => {return {a: vm.someAttr}}; // data可以通过箭头函数的第一个参数获取到vm的引用,来实现状态的初始化,这个初始化更节省资源

props的格式还是记住比较好,少点依赖编辑器的提示

prop: {
	type: Number,
	default: 0,
	required: true,
	validator: function (value) {
		return value >= 0
	}
}

compused: 计算属性的结果会被缓存,所以不需要担心性能问题, 并且可以利用其缓存, 不用新建临时变量去缓存, 并且支持设置setter

vue-router将组件 (components) 映射到路由 (routes),然后告诉 Vue Router 在哪里渲染它们,附带什么参数

{ routes // (缩写) 相当于 routes: routes }

动态路由 -> “动态路径参数”(dynamic segment) 如果想使用动态路由参数就需要在$router.push的时候({name: '..', params: {}}), 不能包含path字段,因为path是目标直接指定push路径的部分,不会根据name+params来生成了

const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

有时候一个组件只是用于参数的传递,/user/:id/page 使用user来接收该参数,具体的页面还是说在page展示,那么这个时候user里面就只有一个元素的

路径一般有父子关系,如果子路由换到其他路由下面,或者挪到路由同级了,这个时候使用push+path不如push+name,name相当于路由的id,与其路径无关,也就是与父级解耦

路由布局是指一个组件内部有过个router-view,那么就是通这个时候就通过name来做区分,这个标识来做组件的绑定或者配置的绑定,是一个1到n的正常扩展

“重定向”的意思是,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b,那么“别名”又是什么呢? /a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。

自己的理解 重定向是访问/a url会修改为/b, 然后去渲染/b绑定的组件 别名是/a or /b 都可以访问该路由, url访问什么就是什么

可以通过props函数进行解耦

const router = new VueRouter({
  routes: [
    { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
  ]
})

高阶组件的定义:接收一个组件作为参数,返回一个新的组件

路由守卫是路由跳转的决策器

路由钩子的执行:(待验证) 离开: 组件的 -> 路由的 -> 全局的 进入: 全局的 -> 路由的 -> 组件的

完整的导航解析流程: 导航被触发。 在失活的组件里调用离开守卫。 调用全局的 beforeEach 守卫。 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。 在路由配置里调用 beforeEnter。 解析异步路由组件。 在被激活的组件里调用 beforeRouteEnter。 调用全局的 beforeResolve 守卫 (2.5+)。 导航被确认。 调用全局的 afterEach 钩子。 触发 DOM 更新。 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

一些非注册的参数会放在$attrs,但是这里不会发生数据绑定

Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

注意,getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果。

最好提前在你的 store 中初始化好所有所需属性。

当需要在对象上添加新属性时,你应该

使用 Vue.set(obj, 'newProp', 123), 或者

以新对象替换老对象。例如,利用 stage-3 的对象展开运算符我们可以这样写:

state.obj = { ...state.obj, newProp: 123 }

Mutation 必须是同步函数

可以使用v-model去创建属性

相应属性不能赋值根,但可以赋值其属性

.sync就可以实现数据的双向绑定了,官方支持了,不过不知道有没有vue版本限制

transition的appear属性还是挺不错的

可以使用Object.freeze(), vue不会做getter和setter的转换

生命周期: beforeCreate -> data -> created -> beforeMount -> mounted

props派生的数据需要watch来完成数据响应的绑定

vue的type不支持undefined字段, 所以只能手动使用validator去验证

文件引入需要使用相对路径,不然到线上环境会找不到, 尤其是配了publicPath的时候,如果资源需要动态引入的时候,可以先import进来到一个变量, 在填到

深度选择符十分有用 >>> 或者 /deep/ ,scss支持支持/deep/

v-bind="obj"可以把对象所有属性当作props传入, 所以组件的prop就可以尽量原子化,更加清晰可见

slot-scope可以获取slot的接受组件的prop

需要网络资源的看初始样式是否出错,如果是的话,可以v-if来延迟初始化

需要批量渲染一组组件可以使用<template v-for>

if-else如果两者差别不会vue会优化,仅仅以最小的差异更新, 这时候如果想单独重新渲染的话,就需要配置不同的key

/deep/ 是需要在scoped的情况是使用的

v-bind不支持 v-model的value双向绑定, 必须单独来操作

functional的优化几乎很少用到

vue的缓存都和key相关的, 所以解决相同组件被缓存的思路就是应该怎么去思考修改key

开了错误检测如此的蛋疼

router-link有class是替换式的, 这个是直接设置而不是增加或者删除, 很蛋疼, 就是传进去的class也是会被替换,但是还原也不会还原传进去的时候, 这个可以提交PR了,先确认一下问题,这是今天的任务之一了

v-for key的作用, 如果使用默认的index的话, 那么如果数组变更的时候会尽量减少损耗, 比如仅仅修改对应的节点, 这样就不会触发过渡动画 就需要设置不是index作为key即可

v-once 可以只渲染一次, 后续当作静态内容

vue的computed依赖的关联不支持函数调用里面的产生的observer get // 需要再次验证

多个参数的传递似乎使用解构也不错,但是传递会比较的多