vue1--零散笔记

发表于 | 分类于 ， ， ， ， | 本文总阅读量 次
字数统计: 2.2k | 阅读时长 ≈ 7

computed VS method

computed：

1
2
3
4
5
6
7
{{ reverseMsg }}

computed:{
	reverseMsg: function({
		//
		})
}

method：

1
2
3
4
5
{{ reverseMsg }}

methods:{
	reverseMsg: function(){}
}

假设上述两种方法出来的结果是一样的，都是反转字符串的结果。我们可以将同一个函数定义为一个方法而不是一个计算属性。结果相同，不同的是计算属性是基于它们的响应性依赖进行缓存的。只在响应式依赖发生改变时，它们才会重新求值。这就意味着只要Msg没有发生改变，多次访问reverseMsg计算属性会立即返回之前的结果，而不必再次执行函数。可如果是函数的话每调用一次都要调用该方法，也就是说computed有缓存，methods没有缓存。但是computed的缓存只是针对响应式依赖。例如：

1
2
3
4
5
computed:{
	now:function(){
		return Date.now()
	}
}

该代码因为Date.now不是响应式依赖，所以当它改变的时候，就不会再更新！！！
相比之下，每当触发重新渲染时，调用方法总会再次执行函数。

computed VS watch

虽然computed再大多数情况下更合适，但有时也需要一个自定义的watch来响应数据的变化，当需要再数据变化时执行异步或开销较大的操作时，这个方法时最有效的。

多页应用和单页应用

多页应用

每一次多页面跳转的时候，后台服务器都会给返回一个新的html文档（页面跳转=》返回html）

  • 优点：首屏事件快，SEO效果好（服务端渲染）
  • 缺点：页面切换慢，每次跳转都是一个http请求

单页应用

第一次进入页面的时候会请求一个html文件。切换到其他组件，路径也响应变化，但是并没有新的html文件请求，页面内容改变了。
原理：js会感知到url的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来做了，而是前端来做判断页面到底是显示哪个组件，清楚不需要的，显示需要的组件。每次跳转的时候不再请求html文件了，只有一个完整页面，在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容（页面跳转=》js渲染）

  • 优点:页面切换速度快
  • 缺点：首屏事件稍慢，SEO差（只认识HTML中的内容，不认识js内容）
    单页应用首屏时间包括了一次html请求时间和一次js请求时间

客户端渲染和服务端渲染区别

服务端渲染

DOM树在服务端生成，然后返回给前端

客户端渲染

前端去后端获取数据生成DOM树

优缺点比较

服务端渲染

  • 优点
    • 尽量不占用前端的资源，前端这块耗时少，速度快
    • 有利于SEO优化，因为在后端有完整的html页面，首屏时间少
  • 缺点
    • 不利于前后端分离，开发效率更低
    • 对html的解析，对前端来说加快了速度，但是也加大了服务器压力

客服端渲染

  • 优点
    • 前后端分离，开发效率高
    • 用户体验好，将网站做成了SPA（单页面应用）
  • 缺点
    • 前端响应速度慢，特别是首屏时间长
    • 不利于SEO

别名和重定向

重定向

当用户访问/a时，url将会被替换成/b，然后匹配路由为/b

别名

/a的别名时/b，意味着当用户访问/b时，url会保持/b，但是路由会被匹配为/a，就像用户访问/a

vue nextTick工作原理

vue在修改数据后，视图不会立即更新，而是等同一个事件循环中的所有数据变化完成之后，再统一进行属兔更新。
用途：需要再=视图更新之后，基于新的视图进行操作。再created、mounted阶段，如果需要操作选然后的视图，也需要使用nextTick方法。也就是说在下一次数据改变后视图没有更新之前。

碎片化笔记

  • 当在一个自定义组件上使用class属性时，这些class将被添加到该组件的根元素上面。这个元素上已经存在的class不会被覆盖
  • 当v-bind：style使用需要添加浏览器引擎前缀的css属性时，如transform，Vue.js会自己侦测并添加响应前缀
  • v-if和v-for一起使用时，v-for是有比v-if更高的优先级
  • Vue不能检测对象属性的添加或删除，我们只能现在data数据挂载对象上定义一个响应式元素，这样的话就可以监听检测到它的改变，如果直接是给一个元素添加不存在data响应式数据的话，就不会检测到，只能手动的用vue的set方法。
  • v-model会忽略所有表单元素的value、checked、selected attribute的初始值，而总是将vue实例的数据作为数据来源。
  • 因为组件时可复用的vue实例，所有它们与new vue接收相同的选项，例如data、computed、watch、methods以及生命周期钩子等。仅有的例外时向el这样根实例特有的选项
  • 一个组件的data选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立拷贝，如果没有这条规则，点击一个按钮就可能会像代码一样影响到其他所有实例。也就是说，组件是可以复用的，如果data不是一个函数，只是一个对象的话，那么复用的所有组件都共享一个data内存数据，即其中一个组件的改变可能会影响到另外组件的相关改变，所以只能用data作为一个函数来进行独立拷贝，这样的话就可以维护每一个可复用组件独立的数据。
  • 全局注册的行为必须在根实例之前（new vue）创建之前发生。所有的prop都使得父子prop之前形成了单项下行绑定：父级prop的更新会向下流动到子组件中，但反过来则不行，这样会防止从子组件意外改变父组件的状态，从而导致应用数据流难以理解
  • 一个足尖上的v-mode默认会利用名为value的prop和名为input的事件
  • v-slot只能添加在<template>上
  • 当只用JavaScript过渡的时候，在enterheleave中必须使用done进行回调，否则，它们将被同步调用，过渡立即完成。
  • 使用FLIP过渡的元素不能设置为display：inline。作为替代方案，可以设置为display：inline-block或者放置于flex中
  • render中的createElement参数返回的是一个实际的DOM元素，它更准确的名字较createNodeDescription，因为它所包含的信息会告诉vue页面上需要渲染什么样的节点，包括及其子节点的描述，我们把这样的节点称为virtualNode
  • 插件通常用来为vue添加全局功能。组件（全局和局部）一般是复用代码，实现一些小的功能，提高代码的可复用性
  • 响应式是非侵入响应式的，数据模型是普遍的js对象，响应式：当修改数据的时候，视图会进行更新。当把一个js进入vue中data选项，vue会遍历次对象所有的属性，并使用object.defineProperty将这些属性全部转换为getter/seeter。object.defineProperty是ES5中一个无法shim的特性，这也就是vue为何不能再IE8及以下的版本浏览器中使用
  • vue无法检测到对象属性的添加或者删除，由于vue会在初始化实例时对属性进行getter/setter转化，所以属性必须再data上才是响应式。
  • 导航守卫：主要用来通过跳转或取消的方式首位导航（防止路由改变）相当于一个拦截器
  • props可以是数组或对象，用于接收来自父组件的数据。如果props时对象，则允许配置高级选项，如雷响检测、自定义验证和设置默认值
  • mixns：接收一个混入对象的数组。合并使用，以后使用自身组件，minxin钩子按照传入顺序依次调用，并在调用自身的钩子之前被调用
-------------本文结束感谢您的阅读-------------