vue随记

scoped作用域的问题

在vue中引入了scoped这个概念 ,scoped的设计思想就是让当前组件的样式不会修改到其它地方的样式 ,使用了data-v-hash的方式来使css有了它对应模块的标识

但是要注意scoped的作用域， 因为权重的问题 如果是在子组件使用了scoped 那么在父组件中是不能直接修改子组件的样式的 需要在父组件中使用vue的深度作用选择器。

>>>  .parent  .children{ /* ... */ }

/deep/ .parent  .children{ /* ... */ }

父子组件之间props之间的爱恨纠缠

就是父组件传过来的props值
// Prop 数据
    //  Prop 是受父组件数据影响的
    //    如果是普通数据（数字、字符串、布尔值）绝对不能修改
    //    即便改了也不会传导给父组件
    //
    //    如果是引用类型数据（数组、对象） =>  最好也使用$emit('xxx')来修改
    //        可以修改，例如 [].push(xxx)，对象.xxx = xxx
    //        不能重新赋值, xxx = [] (错误的)

Tip: 某某所说，这样修改也是不允许的,不符合单向数据流，所以也不推荐这样，还是通过触发事件和监听事件来修改

.sync修饰符

.sync 修饰符相对来说比较特殊，因为其不是事件 event 原有的事件处理相关函数的演变，而是 Vue 自己定义的一个修饰符，如上述的修饰符分类中也将 .sync 分类为自定义事件的修饰符，那么这个自定义事件到底是什么事件呢？

这个事件对应的是 eventBus 事件，eventBus 事件是 MVC 中的一个模式，简单来说就是发布和订阅的过程，就是说有两方，甲方负责始终监听某个事件，乙方负责在需要的时候触发这个事件，甲方在监听到事件被触发时就执行某些操作。甲方就是订阅，乙方就是发布，双方就是发布和订阅模式。

那么在 Vue 中在什么时候会需要用到这种情况呢？

就是在 Vue 的组件在接受外部数据 props 时，Vue 规定，子组件在通过 props 接受外部数据后只有使用该数据的权利，但没有修改该属性的权利。因为，如果子组件修改了外部传来的数据，这样一来子组件和使用其的父文件都可以改来改去，在父组件和子组件都没有明显的改动来源，到最后都不知道这个数据是谁改的了，数据就不好控制了。因此 Vue 就规定组件只能有权使用 props 的属性，不得自己改变，那么若其想要改变，就必须通知该数据的真正拥有者改变，也就是使用该组件的父文件。

其使用的通知方式就是 eventBus 发布和订阅模式

不使用 .sync:

子组件触发事件，事件名格式必须是 update:myPropName ，用 $emit 函数触发

this.$emit('update:title', newTitle) //newTitle就是你想要修改props数据修改后的值

父组件可以监听那个事件并根据需要更新一个本地的数据属性

<myconponent :title="Ptitle" @update:title="Ptitle = $event" />
//在父组件中监听该事件，该事件触发后传递的值以 $event 接收，$event === newTitle ,Ptitle是父组件的数据

或者是定义的接受函数的参数

<myconponent :title="Ptitle" @update:title="val => Ptitle = val" />
//这时接收的值作为函数的参数

使用 .sync:
上述的过程在实际需求中很常用，因此 Vue 就将父组件的监听定义成了一个传值时的修饰符，为 .sync ，上述代码使用 .sync 修饰符后为：

子组件(是一样的)

this.$emit('update:title', newTitle)

父组件

<myconponent :title.sync="Ptitle" /> //等同于上面的传值并监听

**跳转----scrollIntoView() **

在项目中要求点击某个元素之后滚动到特定的位置。
查询了资料后发现了几种方法：

1.scrollIntoView()

<div ref="wrapper">
   <div  @click = goTo()></div>
   <ul id="idName" ref="refName">
     <li></li>
     ...
   </ul>
 </div>

goTo(){
  document.getElementById("idName").scrollIntoView();
  //或者
  document.querySelector("#idName").scrollIntoView();
  //或者
  this.$refs.refName.scrollIntoView();
}

vant 中的van-popup组件弹出层问题

弹出层是懒渲染的：只有在第一次展示的时候才会渲染里面的内容，之后它的关闭和显示都是在切换内容的显示和隐藏

因为vant 中的popup组件的关闭和隐藏，不会把首次打开弹出层渲染的数据给去除掉，所以会导致打开下一个弹出层的时候，当前弹出层中渲染的内容是首次弹出层的内容.
so =>
我们可以用 v-if 条件语句来调节
// v-if 条件渲染
    true：渲染元素节点
    false：不渲染

router、routes、route的区别

1.router：指的是路由实例。

路由编程式导航的this.$router.push()也能进行跳转，这个方法则会向history里面添加一条记录
当点击浏览器回退按钮或者this.$router.back()就会回退之前的url
而this.router.back(-1)就是返回上一个路由

2.routes：指创建路由实例的配置项。用来配置多个route路由对象。routes出现在router文件夹下的index.js文件里，如下图:

就是我们在routes里进行路由配置，我们发现routes里对象里的component属性值既可以写成组件名，也可以直接( )=>import路径写入(路由懒加载)，这两种写法都是可以的，只不过后一种方法就不用再在上面单独import…from…引入了。

3.route：路由对象。

如:this.$route指的就是当前路由对象，可以从对象里面获取name,path,params,query,hash等

vue 依赖注入(可以用vuex代替)

官网

依赖注入可以很好的扩展到更深层级的嵌套组件上，它用到了两个新的实例选项：provide和 inject

<google-map>
  <google-map-region v-bind:shape="cityBoundaries">
    <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
  </google-map-region>
</google-map>

provide选项允许我们指定我们想要提供给后代组件的数据/方法。在这个例子中，就是 内部的 getMap方法：

provide: function () {
  return {
    getMap: this.getMap
  }
}

然后在任何后代组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的 property：

inject: ['getMap']

例子

父组件：

子组件:

查看全局安装npm的包

当我们用npm工具安装的包不知道什么位置的时候，我们可以用指令npm root -g就可以弹出在您电脑的指定位置了。

npm list -g --depth 0

计算属性(computed)和侦听器(watch)

computed: a.同步的, b.有缓存

watch: 异步的

侦听器和计算属性的区别：

• 计算属性的值是需要同步的返回，而侦听器是不需要返回值的
• 计算属性里面不适合做异步操作，而侦听器就适合
• 使用场景：
  • 如果没有异步操作，又需要根据数据的变化计算出一个结果，就用计算属性
  • 如果有异步操作，或仅需要根据数据的变化响应某种操作，就用侦听器

watch() {
  xxx() {
    // code 
  }
}

// 监听器的高级用法 =>
watch() {
  xxx: {
    get:xxx,
    set:xxx
  } 
}

vant-list

混入-mixins

1. 当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”
   比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先
2. 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用
3. 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。