vue笔记(1)

vue笔记(1)

vue.use()

主要用于安装vue的一些插件，需要在new vue()之前进行调用。

vue项目中如何修改第三方组件库的样式

我们知道在vue项目中style添加scoped属性可以进行样式模块化。如果要修改第三方组件库中某些组件的样式，可以通过将scoped属性删去。

或者参考官方文档进行混写模式：

Scoped CSS

$符号在vue项目里是什么意义

可以参考官方文档中的解释

当一个 Vue 实例被创建时，它将 data对象中的所有的属性加入到 Vue的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

但同时也要注意的是：只有当实例被创建时就已经存在于 data 中的属性才是响应式的。

除了数据属性，vue还暴露了一些有用的实例属性和方法。通过用$开头，以便于和用户定义的属性区分开来。

this.$router 和this.$route区别

references:

this.$route和this.$router区别

this.$router和this.$route 的区别

1. this.$router 表示全局路由器对象，项目中通过router路由参数注入路由之后，在任何一个页面都可以通过此方法获取到路由器对象，并调用其push(), go()等方法；
2. this.$route 是当前路由跳转对象，包含当前路由的name、path、query、params等属性

子路由的缓存

问题起因：在不同的子路由页面需要请求接口的内容不一样，出现不发送请求的现象。

references：
解决vue 路由子组件created和mounted不起作用问题

Vue 多个路由绑定同一组件造成created不执行的解决办法

解决步骤

1. 判断父组件里是不是写了keep-alive
2. 多数问题能通过1来解决。
3. 如果在做迭代，且新增的子路由不希望实现缓存则可以通过用以下方式
   • <keep-alive exclude="needExcludeComponentName">
   • <keep-alive v-if="!$route.meta.noKeepAlive"> 路由元信息===>可以用来做路由鉴权

vue路由传参的方式

references:

vue路由传参的三种基本方式

路径携带

this.$router.push({
          path: `/particulars/${id}`,
        })
        
// 读取数据
this.$route.params.id;

特点

路径刷新数据不会丢失

params传递

this.$router.push({
          // 用name来代表路由的路径
          name: 'particulars',
          params: {
            id: id
          }
        })
        
// 读取的时候
this.$route.params.id;

特点

页面刷新数据会丢失

query传递

this.$router.push({
          path: '/particulars',
          query: {
            id: id
          }
        })
// 读取       
this.$route.query.id；

特点

用query传递的数据会显示在url后面

计算属性和方法的区别

官方文档

Vue中methods(方法)、computed(计算属性)、watch(侦听器)的区别

computed计算属性跟methods在内部的函数写起来没有什么区别，只是在调用的时候不一样。

computed	methods	watch
computed里的方法在初始化执行过后，只要任何值有更新，那么所有在computed计算属性里和其相关的值都会更新	methods只有在调用的时候才会执行对应的方法，不会自动同步数据	一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
注：计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算;同时在计算属性中使用箭头函数的时候this的宿主(父级作用域的上下文)不再是本vue实例，因此，建议直接用function	-----	-----
适用于：一个值a受多个值影响时	-----	一个值a影响了多个值

v-for

v-for建议总是和key一起使用

<ListItem v-for="item in discList" :key="item.id" >