vue的一些问题

如有不正，请指正！

目录

1、组件化

2、注册组件

a、创建组件构造器

b、注册组件：

c、使用组件

3、组件不能访问vue实例上的数据

4、全局组件与局部组件

5、v-model语法糖 组件通信

6、计算属性原理： 依赖其他 计算 返回结果

7、路由参数

a、/routerPath/{id}: 页面刷新 不会丢失

b、query  ：会显示在url后面 url?id=xx   刷新不会丢失

c、pamars： 页面刷新 会丢失

8、环境变量配置：全局开发或生产 环境变量的定义与使用

a、

b、使用

c、重启服务 配置生效

d、用于配置服务  域

9、 v-if

10、vue里面 数组哪些方法是响应式的

11、数组  values  keys  entrys

12、父子组件访问

13、插槽：让组件封装更有控制性 可以自定义

a、普通使用

b、具名插槽：就是插槽添加了名字

14、响应式：数据劫持&发布订阅

15、wepback 插件 plugin和加载器loader

16、模块化js

17、SPA：simple page web application  单页面应用

18、vue程序运行过程

19、vue事件绑定原理

20、父子组件生命周期

21、vue项目编译

22、npm run  build/ dev

23、后端路由  服务端渲染：jsp ：java server page

24、前后端分离：ajax的出现   分工清晰  可能多个html  js

25、前端路由及spa：vue  只有一套html js资源

26、html5的history模式：pushState

27、强缓存

28、协商缓存

29、vue路由懒加载

30、vuex

31、call & apply的实现原理

32、判断类型

33、resolve： {

34、vue.set(obj,key,value)

1、组件化

独立可复用的功能模块

方便管理 扩展性强

2、注册组件

a、创建组件构造器

b、注册组件：

vue.extend()

vue.component()

注册的语法糖

模板分类：script  templet

c、使用组件

3、组件不能访问vue实例上的数据

所以 vue组件应该有自己保存数据的地方

为什么必须是函数 独立 避免污染

data() {

return   {

}

}

4、全局组件与局部组件

子组件与父组件

5、v-model语法糖 组件通信

6、计算属性原理： 依赖其他 计算 返回结果

7、路由参数

a、/routerPath/{id}: 页面刷新 不会丢失

this.$router.push({

path: /routerPath/具体参数',

})

路由配置：{

path： ‘/path/:id[形参]’ ，

name： ‘’

}

b、query  ：会显示在url后面 url?id=xx   刷新不会丢失

this.$router.push({

path: '路由地址',

query :{

id: 'xx'

}

})

获取：this.$route.query.id

注意：$router  整个所有路由对象

$route  当前路由对象 信息

c、pamars： 页面刷新 会丢失

this.$router.push({

name: '路由名称',

pamars :{

id：'xx'

}

})

获取：this.$route.pamars.id

8、环境变量配置：全局开发或生产 环境变量的定义与使用

a、【.env.dev】文件

.env： 在所以环境中被载入

.env.dev： 开发环境

.env.pro： 正式生产环境

位于项目根目录，任意地方可以使用

b、使用

在配置文件中定义变量： VUE_APP_XXX = '';

使用 获取：process.env.XXX[变量名]

c、重启服务 配置生效

d、用于配置服务  域

9、 v-if

v-if  v-else

10、vue里面 数组哪些方法是响应式的

尾部追加：push()

尾部删除：pop()

首部删除：shift()

首部添加：unshift()

删除/插入/替换元素：splice()

排序：sort()

反转数组：reverse()

不响应式： 通过索引值修改数组中元素

11、数组  values  keys  entrys

12、父子组件访问

父访问子： $children【数组、所有子组件】 或$refs 【对象类型 默认为空】

子访问父： $parent

根组件： $root

Props $on $emit  \  $bus.$on $bus.$emit \ vuex

13、插槽：让组件封装更有控制性 可以自定义

a、普通使用

组件内部：<slot><slot/>

使用组件： 组件内部的<slot><slot/>如同占位符  使用组件时 传入的内容就会去替换

<组件名称>

需要插入的内容

<组件名称/>

b、具名插槽：就是插槽添加了名字

组件内部：<slot name="xx"><slot/>

使用组件：

<组件名称>

<div slot="xx">需要插入的内容</div>

<组件名称/>

14、响应式：数据劫持&发布订阅

核心： observe  watcher dep

observe：劫持 遍历 data，使用object.defineProperty 为每个变量添加set和get

dep：每个属性拥有自己的消息订阅器 用于存放所有订阅了该属性的观察者对象

数据变化后  通知到订阅自己的观察者 即发布消息到使用者

watcher：观察者 通过dep实现对响应属性的监听 监听到结果后 主动触发自己的回调进行响应 更新update

15、wepback： 插件 plugin和加载器loader

16、模块化js

引入：import / require

导出：export

17、SPA：simple page web application  单页面应用

vue-router 前端路由

18、vue程序运行过程

template - ast - render - virtual dom - ui

19、vue事件绑定原理

原生事件通过 addEventListener绑定给真实元素  表现为 @click

组件事件绑定通过vue自定义的$on实现

20、父子组件生命周期

调用：先父后子

渲染完成 先子后父

销毁 先父后子

销毁完成： 先子后父

渲染：父 beforeCreate -》 父created =》 父beforeMount =》 子创建前 =》 子 创建 =》

子 挂载前后  =》 父挂载 mounted

更新updated： 父 更新前 =》  子 更新前后 =》 父更新完成

21、vue项目编译

runtime-complier：template - ast - render - vdom - ui

runtime-only： render - vdom - ui    代码量更少  性能更高

22、npm run  build/ dev

入口文件： build/build.js /  package.json-scripts

23、后端路由  服务端渲染：jsp ：java server page

早期 整个html由服务器来渲染的

服务器直接生成html  给到客户端

每个页面都有自己的url 一一对应 形成路由

24、前后端分离：ajax的出现   分工清晰  可能多个html  js

后端只负责提供数据

客户端 浏览器内容由前端js执行

25、前端路由及spa：vue  只有一套html js资源

26、html5的history模式：pushState

a、 类似于栈：押入栈底  先进后出

history.pushState（{}，‘’，‘/foo’）   有记录  可以回退 前进

history.replaceState  直接替换

b、方法：  history.go(有参数  可正可负)、 history.back（）：后退、 history.forward（）：前进

等同于浏览器自己的前进后退

27、强缓存

发送过的请求强行缓存，有效期内直接使用 不用重新发送请求

28、协商缓存

如果缓存过期 缓存的数据没有发生变化 服务器返回304 不返回内容，数据继续使用

29、vue路由懒加载

{

path：‘’,

component: () => import('../xx/xx')

}

30、vuex

state：保存应用数据状态  data

mapState： 处理顶层状态到组件的映射关系

Getters：对状态进行公共的处理     compute？

mapGetters： 处理Getters到组件的映射关系

mutation：业务组件中通过$store.commit（‘方法名’，‘参数’） 同步修改state    methods

mapmutation：： 简化mutation的调用

action：子组件通过$store.dispatch（‘方法名’，‘参数’） action 异步修改应用状态

mapaction：简化action的调用

Modules：模块化管理

31、call & apply的实现原理

a、改变this指向

b、返回函数调用

c、参数参数：  call:挨个传递  apply：组装成数组传递

32、判断类型

Object.prototype.toString.call(参数)

33、resolve： {

别名：

alias： {

‘@’：resolve（‘src’）

}

}

34、vue.set(obj,key,value)

35、判断 两对象是否相等 json.stringify

36、删除 指定位置 splice remove

37、拷贝问题

deepClone(source) {

if (!source && typeof source !== "object") {

throw new Error("error arguments", "deepClone");

}

const targetObj = source.constructor === Array ? [] : {};

Object.keys(source).forEach((keys) => {

if (source[keys] && typeof source[keys] === "object") {

targetObj[keys] = this.deepClone(source[keys]);

} else {

targetObj[keys] = source[keys];

}

});

return targetObj;

},

38、监听和计算  监听 值没变 深度监听

deep: true,

immediate: true,

39、str.replace('xx','')

40、旋转 transform: rotate(90deg);

41、获取元素的宽高 内容宽高

document.body.clientHeight  视口

offsetHeight/width  内容宽高

offsetLeft/top：到上一层元素的距离

42、插槽

1.1、默认

1.2、具名

43、Flex布局

左边固定 右边自适应

右边内容过多会挤压左边

解决：

父：display：flex；

左：width：200px；

右边 flex：1；min-width：0

44、迭代与递归

迭代 求和

递归 循环处理

45、计算当前月有多少天

/** 计算当前月有多少天

*

* @param {Object} year

* @param {Object} month

*/

function calcDays_dy(year, month) {

if(month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {

return 31;

}

if(month == 2) {

if(year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)) {

return 29;

} else {

return 28;

}

}

return 30;

}

46、伪元素 .img::after {}

定位是参考谁 和常规一样 有定位的  直接父级是使用伪元素的元素

47、伪类 hover

.listItem:hover {}

48、渐变背景色

background-image: linear-gradient(to right, #b7f4ec, #37d4cf);

49、$bus的监听与触发

监听：即调用this.$bus.$on方法，监听的方法一般写在mounted里面

触发：this.$bus.$emit

50、不能使用关键字作为组件名称

vue.runtime.esm.js?2b0e:619 [Vue warn]: Do not use built-in or reserved HTML elements as

component id: details

不能使用关键字作为组件名称

51、动态路由 <componten :is="组件名称" >

52、数组 find 方法

53、路由新页签打开

const { href } = this.$router.resolve({

path: "index",

query: {

componentName: "viewCom",

},

});

window.open(href, "_blank");

this.$route.query.componentName

54、图片懒加载

A、 常规方法

B、使用插件vue-lazyload：

1、npm

2、导入

3、vue.use(''，{

loading: '占位图地址' //requer('地址')

})

4、<img  :src=“url” >  ==>  <img v-lazy="url"

5、懒加载 默认占位空白 可以设置占位图

55、 当前星期几

const index = new Date().getDay();

const arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

return arr[index];

56、属性选择器

.arrow[disabled] {

cursor: not-allowed;

}

57、vue 图片使用  别名src

html里面：@/assets/image/  src的别名@开头

js：@/assets/image/

css背景图:  ~@/assets/image/   波浪线加src的别名@开头

在vue css中采用别名引入 背景图片，可以在前面加一个波浪号

Webpack 会将以~符号作为前缀的路径视作依赖模块而去解析，这样 @的 alias 配置就能生效了。