params和query的区别

query语法

this.$router.push({path:"地址",query:{id:"001"}}); 这是传递参数 
this.$route.query.id； 这是接受参数

query语法

this.$router.push({name:"地址",params:{id:"002"}}); 这是传递参数 
this.$route.params.id; 这是接受参数

1.接收参数的方式不同，一个用this.$route.query.id，一个用this.$ route.params.id

2.query用path编写传参地址，params用的是params，query用name也能传，params只能用name

3.query在刷新页面时，参数不会消失，params刷新页面，参数会消失，可以在路由中配置/：id（/:参数）来实现刷新不丢失参数

4.query传来的参数会暴露在地址栏中，类似于get请求

params传递的参数不会暴露在地址栏，类似于post请求，可以在路由中配置/:参数，那样参数也会暴露在地址栏只会展示含有动态路径参数的部分，刷新会丢失没有设置动态路径参数的params的数据。

5.形成的路径不同（或者url地址显示不同）： 使用query传参的话，会在浏览器的url栏看到传的参数类似于get请求，使用params传参的话则不会，类似于post请求。

params传递后形成的路径：/router/123,/router/zhangsan

query传递后形成的路径：/router?id=666&name=zhangsan

说一下以下代码区别

import { trimStart } from 'lodash';
import { trimStart } from 'lodash-es';

import { trimStart, trimEnd } from 'lodash-es';
import trimStart from 'lodash/trimStart';
import trimEnd from 'lodash/trimEnd';

vue中关于api统一管理那点事

www.sdzzjj.com
www.sdzzjj.com

this的理解

vue 生命周期理解

数据类型理解

• Number
• String
• Boolean
• Null
• Undefined
• Object
• Symbol
• BigInt

按照类型来分有基本数据类型和引用数据类型：

基本数据类型： String、Number、Boolean、Null、Undefined、Symbol

引用数据类型： Object【Object是个大类，function函数、array数组、date日期...等都归属于Object】

Promise

0 == false 0 === false {}=={} {}==={} "{}"=={} "{}"==={}

Vue-router history 模式部署的时候要注意什么？server 端用 nginx 和 node 时候分别怎么处理？

跨域

Vue2.0 Vue3.0区别

Vue2生命周期	Vue3生命周期	说明
beforeCreate	setup	组件创建之前
created	setup	组件创建完成
beforeMount	onBeforeMount	组件挂载之前
mounted	onMounted	组件挂载完成
beforeUpdate	onBeforeUpdate	数据更新，虚拟 DOM 打补丁之前
updated	onUpdated	数据更新，虚拟 DOM 渲染完成
beforeDestroy	onBeforeUnmount	组件销毁之前
destroyed	onUnmounted	组件销毁后

响应式原理的不同
默认项目目录结构的不同
vue3支持vue2的大多数特性，实现对vue2的兼容
vue3对比vue2具有明显的性能提升
vue3具有的composition API实现逻辑模块化和重用
增加了新特性，如Teleport组件，全局API的修改和优化等
vue3的出现就是为了解决vue2的弊端，其composition API很好的解决了逻辑复用的问题，
typescript 而且vue3源码就是用ts写的，对ts的支持非常好。我们在开发项目过程中可以使用ts的加持，使代码更加健壮。
template子元素 多个单个问题
全局变量
设置：app.prototype.$**                        获取this.**
设置：app.config.globalProperties['**']        获取 getCurrentInstance().proxy.**

import { nextTick } from 'vue' nextTick(() => { // 一些和DOM有关的东西 }) // vue2写法 // vue2全局配置的修改，会修改Vue对象的属性 // 在不同的app中，共享一份有着不同配置的Vue对象，也变得非常困难 import Vue from 'vue' import App from './App.vue' Vue.config.xx=xx Vue.use(...) Vue.mixin(...)

new Vue({ render:h=>h(app) }).$mount('#app')

// vue3写法 import { createApp } from 'vue' import App from './App.vue' const app = createApp(APP) // 创建一个app实例 app.config.xx=xx // 在实例上修改配置，不会发生冲突 app.use(...) app.mixin(...) app.mount('#app')

# v-model

// 等同于 ```

Vue组件通信方式

props / $emit ref 与$parent / $children EventBus （$emit / $on） provide / inject .Vuex

链式调用

var person=new Person("测试");
person.eat().drink().say()

如何理解封装 node 中间件 

强制类型转换

var a = parseInt("123")
console.log(typeof a) // number
var b = parseFloat("123")
console.log(typeof b) // number
var c = 123
console.log(typeof c.toString())// string
var d = Number("1234")
console.log(typeof d)
var e = Boolean('true')
console.log(typeof e)

隐式转换

console.log(typeof (1 + '1')) // string
console.log(typeof (true + '1')) // string
console.log(typeof (1 + true)) // number

this.$data: vm上的数据
this.$el:当前el元素
this.$nextTick :异步方法，等待渲染dom完成后来获取vm
this.$watch:监控
this.$set:后加的属性实现响应式变化
this.$refs:被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

sunny:

vue dom元素

在JavaScript中需要通过document.querySelector("#demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this.$refs即可调用，这样可以减少获取dom节点的消耗。

ref介绍

ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向该子组件实例

通俗的讲，ref特性就是为元素或子组件赋予一个ID引用,通过this.$refs.refName来访问元素或子组件的实例

<p ref="p">Hello</p><children ref="children"></children>

this.$refs.p
this.$refs.children

this.$refs介绍

this.$refs是一个对象，持有当前组件中注册过 ref特性的所有 DOM 元素和子组件实例

注意： $refs只有在组件渲染完成后才填充，在初始渲染的时候不能访问它们，并且它是非响应式的，因此不能用它在模板中做数据绑定

vue-router 中 router-link 与 a 标签的区别 

var a ={name:"张三"}
var b = a
a.name = "李四"
a.sex = "1"
console.log(a.name)
console.log(a.sex)
console.log(b.name)
console.log(b.sex)

vue vue2.0中vue是函数还是对象

首先，什么是 CSS 权重呢？CSS 的权重，是选择器的相对重要程度值，也可以叫权值。这个权值决定了选择规则的优先级。通常我们对 CSS 的优先级的规则主要有下面三条：

1.CSS 权值不同时，权值高的优先；

2.CSS 权值相同时，后定义的规则优先；

3. CSS 属性后面加 ​ !important​  时，无条件绝对优先；

只要得知权值的大小，就可以根据上面的规则进行比较。 !important>style>id>class

sunny: const boy = new PlayBoy('Tom') boy.sayHi().sleep(1000).play('王者').sleep(2000).play('跳一跳') // 输出 // 大家好我是Tom // 1s 之后 // 我在玩王者 // 2s 之后 // 我在玩跳一跳

sunny: arguments 的对象是什么？

sunny: function Foo() { getName = function () { alert(1); }; return this; } getName(); Foo.getName = function () { alert(2); }; Foo.prototype.getName = function () { alert(3); }; getName = function () { alert(4); };

sunny: 4.下面这个ul，如何点击每一列的时候alert其index?

sunny: CSS选择符有哪些？哪些属性可以继承？ 1.id选择器（ # myid） 2.类选择器（.myclassname） 3.标签选择器（div, h1, p） 4.相邻选择器（h1 + p） 5.子选择器（ul > li） 6.后代选择器（li a） 7.通配符选择器（ * ） 8.属性选择器（a[rel = "external"]） 9.伪类选择器（a:hover, li:nth-child）

• 可继承的样式： font-size font-family color, UL LI DL DD DT;

• 不可继承的样式：border padding margin width height ;

sunny: 一个满屏 品 字布局 如何设计? 简单的方式： 上面的div宽100%， 下面的两个div分别宽50%， 然后用float或者inline使其不换行即可

sunny: 如何实现元素样式统一

sunny: 如何判断一个对象是否属于某个类？

function Person(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
var a=new Person()
var b=new Person()

console.log(auto instanceof Person);
// expected output: true  

console.log(auto instanceof Person);
// expected output: true 

深拷贝浅拷贝：

深拷贝: 将 B 对象拷贝到 A 对象中，包括 B 里面的子对象，

浅拷贝：将 B 对象拷贝到 A 对象中，但不包括 B 里面的子对象

--	和原数据是否指向同一对象	第一层数据为基本数据类型	原数据中包含子对象
赋值	是	改变会使原数据一同改变	改变会使原数据一同改变
浅拷贝	否	改变不会使原数据一同改变	改变会使原数据一同改变
深拷贝	否	改变不会使原数据一同改变	改变不会使原数据一同改变

JSON字符串转换为JSON对象: var obj =eval('('+ str +')'); var obj = str.parseJSON(); var obj = JSON.parse(str);

JSON对象转换为JSON字符串： var last=obj.toJSONString(); var last=JSON.stringify(obj);

Ajax 解决浏览器缓存问题？

1、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。

2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。

3、在URL后面加上一个随机数： "fresh=" + Math.random();。

sunny: (function (a, b) { alert(a + b); }(1, 2))

sunny: [图片]

sunny: [图片]

sunny: 请描述一下 cookies，sessionStorage 和 localStorage 的区别？

sunny: 如何实现浏览器内多个标签页之间的通信? (阿里)

sunny: 如何在页面上实现一个圆形的可点击区域？ 1、map+area或者svg 2、border-radius 3、纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

sunny: vue-router 中的导航钩子函数

sunny: Js 动画与 CSS 动画区别及相应实现

sunny: vue 全局方法

sunny: form 表单提交固定格式时间

sunny: new date（1994）

sunny: 图片无感加载 的懒加载和预加载

sunny: 前端状态码的统一处理

sunny: vue-router 中的导航钩子函数 router.beforeEach

sunny: detial?id=1=>detial?id=2

阻止事件冒泡的三种手段

• return false：可以阻止默认事件和冒泡事件
• event.stopPropagation/IE下event.cancelBubble  = true;：可以阻止冒泡事件但是允许默认事件
• event.preventDefault();/IE下event.returnValue = false：可以阻止默认事件但是允许冒泡事件

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

vue3实现filters(过滤器)功能# vue3实现filters(过滤器)功能

由于vue3取消了vue2中的过滤器，但是变相一下，可以在双括号表达式中使用方法，所以也是可以间接实现的，功能简单