应用场景

css筑梦
185 阅读4分钟

1.组件传值

1.父组件向子组件传值：props 
子组件向父组件传值$emit
官方文档的两种使用方法：

image.png

使用场景一：子组件触发：this.$emit('deleteCurrent', key)
父组件接收：

image.png

image.png

使用场景二：子组件触发一样
1父组件接收参数，需要添加一些自定义的参数，往函数里面传
2父组件接收多个参数，，也可以通过argument进行接收，接收的是一个伪数组

image.png

image.png

在接收函数里面，第一个参数需要用argument进行接收,后面的参数可以进行自定义接收
函数里面，可以进行解构获取数据
2.父组件向孙子组件或者更深层次的传值：provide和inject，不需要一层一层的传递了，简单数据类型会有问题，所以要传入一个可监听的对象

image.png

3.父组件使用二次封装的子组件的一些属性或者事件：可以使用$attrs和$listeners 属性往下 方法往上
4.兄地组件使用$bus

2.keepAlive

1.路由缓存，也就是页面缓存
2.组件缓存

3.vuex的应用场景

存储一些用户信息和token，例如用户名和用户ID
用户名：登录系统之后，在页面上进行显示
用户ID：修改密码，像后台传用户id

4.$nextTick()

 1.在created里面进行dom操作 
 2.mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted 
 3.操作数据，不会立即操作，要等异步队列里的任务结束在进行，如果想要立即有效果，就需要this.$netTick() $nextTick()获取dom上的最新数据，异步操作，promise,或者setTimeout IOS,或者mutationObserver或者setImmediate IE或者node
 4.示例：在父组件更新tableData,子组件接受的tableData不会立即更新，需要使用this.$nextTick(function(){})

5.key

 1.v-for 
 2.它也可以用于强制替换元素/组件而不是重复使用它
 示例：使用富文本编辑器 动态改变 编辑器的操作选项  可以通过改变key来实现，
       如果动态的修改不能渲染的话，可以使用key,用于强制的替换元素和组件

6.自定义指令

  全局指令：弹框的拖拽，输入框的聚焦

7.过滤器

 全局过滤器:过滤掉一些特殊字符

8.vue的性能优化

image.png

9.computed

计算数据的总和，传参

10.watch

比如监听多选的个数，得出多选的长度

11.minix

 1.当多个组件/页面有相同的选项,可以通过mixin抽离公共代码,达到**复用效果**
 2.因为mixin覆盖性会导致不稳定性.类似全局变量,如果mixin被修改,会造成全局污染.所以使用的时候需要小心
 3.跟封装的组件区别：mixin可以是一些公共方法的提取，避免了代码的重复书写，直接引入就可以了，有自己的生命周期和vue的语法，封装组件，可以是一些公共组件的提取

12.slot

 作用域插槽：子组件里面的插槽，父组件接受数据
 子组件插槽传值：

image.png

父组件接受值：

image.png

13.闭包：外部函数可以访问内部的变量，相当于全局变量，考点：作用域链；闭包是指有权访问另一个函数作用域中变量的函数

    1.vue的computed传值
    2.函数里面使用一些数组的方法，比如filter
    3.模块化和柯里化

14.数组map和filter

map:如果遇到不符合的条件，返回的是undefined

image.png

image.png

filter:只返回符合条件的数据

image.png

image.png

15.深度优先遍历（DFS）:使用递归

    1.接口动态查询的路由，偶发bug:基础组件加载失败，导致页面无法正常显示

    2.打包的问题，页面报错，显示default of undefined,经排查发现
    排查的方式：可以把sourcemap:true，在页面里面可以查看出问题的文件

   使用懒加载的方式的引入组件，即可解决

image.png

    3.打包需要将路由的模式改为mode:hash,如果是history则显示文件不存在

17.清空缓存，第一次本地启项目，出现白屏

原因：通过重命名将node_module定义为nodeVendor.js,nodeVendor.js过大，加载时间太久，所以出现白屏，跟网速有一定的关系
解决方案：
1.添加一个首屏的动画，放在public/index.html
2.下载UglifyJsPlugin插件，js压缩插件，但是npm run dev projectA 起项目时间边长，---没看到效果，打包的应该达到预测的效果，速度加快
3.模块分割，进行分包,将优先级priority:-10设置为负数  可以将nodeVendor.js减小到  
39.1M --- 31.1M

18.设置SVN

 提交代码，忽略 node_modules和dist文件夹，需要配置SVN,可以参考该网址https://www.cnblogs.com/chenguangliang/p/11383306.html

19.vue中用到的设计模式

观察者模式：vue,一对多，一个改变，对应多个改变 ----双向绑定
订阅发布者：-----就是观察者模式 +  代理模式     vue  ----双向绑定
单例模式：一个类只有一个对象实例，vuex，只有一个全局的变量

20.vue的数据是同步更新的，视图是异步更新的

 vue实现响应式，数据变化，并不是立即更新的
 this.$nextTick  下次DOM 更新循环结束之后执行延迟回调

21.model

 封装自定义组件，允许一个自定义组件在使用 `v-model` 时定制 prop 和 event，例如表单组件的封装。

22.component

    动态组件：使用场景：tab选项卡，里面的内容，以组件的形式展示，可以使用动态组件。优点：代码简洁。语法：：is="组件的名称"

23.vue-router

 路由导航守卫的种类
 1.全局守卫：整个路由的守卫 应用场景：进入路由时候的动画效果
 2.路由独享的守卫 ：route.index.js  每个路由自己的守卫
 3.vue组件的守卫：页面写路由，根据页面要求，通过路由的守卫，进行一些逻辑判断
avatar
文章
阅读
粉丝