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 配置就能生效了。

巴特西

vue的一些问题

最新文章

热门文章