细节混淆知识点

引入包：
第三方包（从npm下载的）：直接引入，不需要变量接（所有的模块包名名字都是小写）
如：下载bootstrap 第三方模块包

自定模块包：需要使用变量接（自定模块包是自己定义的，并且需要导出才能引入才能使用，因此需要使用变量接）

区别：

默认导出 | 按需导出

默认导入 | 按需导入

需要使用 { } 进行接收的有：

按需导入：

vuex中的映射函数：

不需要 { } 进行接收的有：

引入自定义的子组件名
默认导入

css样式中：
为了避免塌陷：父子关系用padding；兄弟关系用margin（首先得找准标签间的关系）

子组件内：
props传值的两种方式
①. // props: ['']    // 数组的方式只能起名，

②. 对象可以详细的修饰限制

  // props: ['']
  // 数组的方式只能起名，对象可以详细的修饰限制
  // 变量定义完成后得使用，在父组件中使用（父—>子)
  props: {
    // 格式
    /*
    方式①. 
    变量名：类型
    方式②.
    变量名：{  // 对变量进行类型的修饰限制或检查
      type: 类型
      default: 默认值 //在用户没有进行传值的时候，设置默认值
      required: true // 写上此变量表示必须传入
    }
    */
    bgc: String,
    colorStr: {
      typ: String,
      default: "black",
    },
    content: {
      type: String,
      required: true, // 表示必须传入content内容
    },
  },

v-model本质：

给:vue属性赋值
绑定input事件，并把值赋予给变量

try { }  catch( )--捕获异常

template模板标签中使用的变量都得在export default{中声明}
(声明变量有两个地方：data函数(return {中})、computed计算属性；函数和方法写到methods中  )

在new Vue中注入store，是让Vue实例拥有store的值，往Vue原型上，把store值赋值给 this.$store上，其他任意组件就可以通过this.$store访问到store对象

Vue.prototype.$store：往Vue原型对象上添加$store属性

 Vue.prototype.$store = store：往属性身上赋store对象的值

目的：确保整个项目拥有this.$store属性

总结：往Vue原型上注册，确保整个项目拥有this.$store属性；在new Vue中注入store，是让Vue实例拥有store的值，其他组件就可以通过this.$store上使用store值

全都注册与全局注册的区别：

全都注册--全都引入然后一并注册多个组件
全局注册--引入某一个，注册后，整个项目任意地方都能直接使用标签

跳转路由传参：

路由路径传参：

 

在组件内绑定的事件都是自定义事件

实现点击效果：
组件内必须使用 $emit 触发
.native给组件内的根标签绑定一个点击事件（@click.native）

 封装全局指令

数据映射：

 使用短路获代替三元表达式

 路由守卫：检测路由路径跳转

只要路由发生了跳转，就会先执行路由守卫中的函数体，再决定是否跳转

组件缓存：
组件缓存，只缓存标签
组件内变量值，不会存下来 （会回归为初始化值）
<keep-alive>这里包的是路由挂载点</keep-alive>--组件缓存了不会销毁也不会重新创建
缓存了就不会重新执行created发起请求（缓存--如：打开不同的文章，发现都是同一文章结构内容）
使用exclude="名字"解决缓存问题（加了这个就不会进行缓存，给不用缓存的组件加 name: 'xxx'）
组件缓存后，created和destroyed不会再次执行了，取而代之：activated和deActivated（激活 | deActivated-检测所在组件的页面被切走了，失去激活状态）

某个组件不重新请求数据问题解决方式：
方式①. exclude--不缓存某个组件
方式②. created换成activated即可

 安全数

统一封装ui层的弹窗

 

作用域插槽：
使用场景：使用组件插槽时，想使用组件内变量（使用作用域插槽把变量绑定出来）
①. 在子组件内，slot上自定义属性和组件内要传出的值（变量）
②. template身上v-slot=“临时变量名 ”（scope会收集到row和数据对象--scope: { row: 数据对象 }）
③. 临时变量名就会收集对应slot身上所有属性和值

 

知识拓展：

 如何实例化store仓库对象并确保可以为整个项目用：

使用代理服务器来解决跨域问题：

 在.js文件中想要获取vuex中某个数据：

@ 符号是 vue.config.js 文件中定义的，它是基于 src 目录的
在 js 和 template 中，可以直接使用 @，
但是在 styles 中。@ 符号之前必须加 ~ ，代表相对于，相对于 src 目录去查找资源

如果不写 scoped 会对其他页面组件产生影响，会覆盖或者作用于其他页面
如果带 scoped ，说明是作用于当前组件，页面组件

dispatch 是异步的，需要在 dispatch 前面加上 await ，最近的函数写上 async

数组方法：返回新数组

.map()
.find()
.filter()

直接赋值的形式：

 

Vue.use() 使用

this 总结：

在标签中不用this
在 created、methods中使用this. 进行调用

一生种总会遇到这样的时候：你的内心已经兵荒马乱天翻地覆了，可是在别人看来你知识比平时沉默了一点，没有会觉得奇怪，这种"战争"，注定单枪匹马。

ps: 持续更新中......