Computed 和 watch区别
计算属性computed :
支持缓存,只有依赖数据发生改变,才会重新进行计算,数据不用在data中定义好,在这里面定义了会缓存起来
不支持异步,当computed内有异步操作时无效,无法监听数据的变化
computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed
如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性值;在computed中的,属性都有一个get和一个set方法,当数据变化时,调用set方法。
侦听属性watch:
不支持缓存,数据变,直接会触发相应的操作;
watch支持异步;
监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
监听数据必须是
data
中声明过或者父组件传递过来的props
中的数据,当一个属性发生变化时,需要执行对应的操作;一对多;监听数据必须是data中声明过或者父组件传递过来的props中的数据,当数据变化时,触发其他操作,函数有两个参数,
immediate:组件加载立即触发回调函数执行,
deep: 深度监听,为了发现对象内部值的变化,复杂类型的数据时使用,例如数组中的对象内容的改变,注意监听数组的变动不需要这么做。
注意:deep无法监听到数组的变动和对象的新增,参考vue数组变异,只有以响应式的方式触发才会被监听到。
css的scope
实现原理
采用 PostCSS 转义实现。
PostCSS 给一个组件中的所有dom添加了一个独一无二的动态属性,然后,给 CSS 选择器额外添加一个对应的属性选择器来选择该组件中 dom ,这种做法使得样式只作用于含有该属性的 dom ——组件内部 dom。
1 | <p class="example" data-v-5558831a>hi</p> |
交换两变量的值
解构
1 | var a = 10; |
弱类型
1 | var a = 10; |
计算
1 | var a = 10; |
vue中route和router区别
1、$route对象
$route对象表示当前的路由信息,包含了当前 URL 解析得到的信息。包含当前的路径,参数,query对象等。
2、$router对象
$router对象是全局路由的实例,是router构造方法的实例。
- push:push方法的跳转会向 history 栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面。
- go:页面路由跳转
- replace:替换当前页,并且不会向history添加记录(一般用于404页面)
history和hash
hash
hash 也 称作 锚点,本身是用来做页面定位的,她可以使对应 id 的元素显示在可视区域内。
由于 hash 值变化不会导致浏览器向服务器发出请求,而且 hash 改变会触发 hashchange 事件,浏览器的进后退也能对其进行控制
history
首先,hash 本来是拿来做页面定位的,如果拿来做路由的话,原来的锚点功能就不能用了。其次,hash 的传参是基于 url 的,如果要传递复杂的数据,会有体积的限制,而 history 模式不仅可以在url里放参数,还可以将数据存放在一个特定的对象中。(而且少了#,但是怕刷新)
restFul
- restful其实就是一套编写接口的协议,协议规定如何编写以及如何设置返回值、状态码等信息。(面向资源软件架构风格)
- 最显著的特点:
- restful: 给用户一个url,根据method不同在后端做不同的处理,比如:post 创建数据、get获取数据、put和patch修改数据、delete删除数据。
- no rest: 给调用者很多url,每个url代表一个功能,比如:add_user/delte_user/edit_user/
js的new过程
es5
1 | function Person(name) { |
es6
new过程中会新建对象,此对象会继承构造器的原型与原型上的属性,最后它会被作为实例返回
- 以构造器的prototype属性为原型,创建新对象;
- 将this(也就是上一句中的新对象)和调用参数传给构造器,执行;
- 如果构造器没有手动返回对象,则返回第一步创建的新对象,如果有,则舍弃掉第一步创建的新对象,返回手动return的对象。
1 | function mynew(Func, ...args) { |
多态
多态的具体表现为方法重载和方法重写:
方法重载:重载是指不同的函数使用相同的函数名,但是函数的参数个数或类型不同。调用的时候根据函数的参数来区别不同的函数
方法重写:重写(也叫覆盖)是指在派生类中重新对基类中的虚函数(注意是虚函数)重新实现。即函数名和参数都一样,只是函数的实现体不一样
vuex挂载到每个组件实例上的过程
1.首先在项目中通过 npm install vuex –save 时调用了vuex中的install方法,在install方法中有一段核心代码,vue.mixin({beforeCreate,vuexInit}), 通过vue中的mixin机制,然后再借用生命周期钩子函数beforeCreate在组件实例化前调用vuexInit方法,
在vuexInit方法中有一段核心代码,this.$store = typeof options.store === ‘function’? options.store(): options.store ,
通过这段代码,将vuex中的store对象挂载到每一个对象当中,this指向的即是每一个组件实例,这样就可以在每个组件内通过this.$store使用vuex来进行统一的数据管理
requestAnimationFrame
- 因为setTimeout在低端机会出现卡顿、抖动:因为被放进一步队列,所以实际执行时间会比设定晚一点。还有因为固定的刷新时间,不同分辨率和屏幕尺寸会收到影响
- requestAnimationFrame优点
- 经过浏览器优化,动画更流畅。由系统来决定回调函数的执行时机
- 窗口没激活时,动画将停止,省计算资源
- 更省电,尤其是对移动终端
href和src的区别
href标识超文本引用,用在link和a等元素上,href是引用和页面关联,是在当前元素和引用资源之间建立联系
src表示引用资源,表示替换当前元素,用在img,script,iframe上,src是页面内容不可缺少的一部分。
js获取屏幕分辨率
“屏幕分辨率为:”+screen.width+”*”+screen.height