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