vue的一些小知识

1

在使用router-link作为代替a标签的跳转功能是,在控制台中router-link默认的标签扔是a标签

2

tag属性课将router-link制定为其他标签:如:

<router-link to="/" tag="div">

vue的slot使用

1.解决什么问题:
在hello world在组件标签Child中的span标签会被组件模板template内容替换掉，当想让组件标签Child中内容传递给组件时需要使用slot插槽；
2.使用

//父组件中
<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <childslot>
      <div class="tmpl">
        <span>菜单1</span>
        <span>菜单2</span>
        <span>菜单3</span>
        <span>菜单4</span>
        <span>菜单5</span>
        <span>菜单6</span>
      </div>
    </childslot>
  </div>

</template>

<script>
  import childslot from "./childslot";
    export default {
        name: "slot",
        components:{
            childslot
        }
    }

</script>

<style scoped>

</style>

//子组件中,相当与父组件中的span标签 传给了子组件的<slot>中,所以他相当与占坑了
<template>
  <div class="child">
    <h3>这里是子组件</h3>
    <slot></slot>
  </div>
</template>

<script>
    export default {
        name: "childslot"
    }
</script>

<style scoped>

</style>

vue组件里data为什么一定是函数

1.深拷贝和浅拷贝
(1).基本数据类型是放在栈里面的，它是按值访问，在栈内存中发生复制行为时系统会为新的变量提供新值，所以两个变量互不影响
(2).引用数据类型是放在堆内存中的，它是按引用访问的，在栈内存中有一个地址是指向堆内存中的引用数据类型的，所以我们拷贝引用数据类型其实就是拷贝了栈内存中的地址，因为地址一样，他们都是指向同一个引用数据类型，所以两个变量会相互影响，这时就必须使用深拷贝了
2如果能理解深浅拷贝就可以理解 data 为什么要用函数了
在创建或注册模板的时候传入一个 data 属性作为用来绑定的数据。但是在组件中，data必须是一个函数，因为每一个 vue 组件都是一个 vue 实例，通过 new Vue() 实例化，引用同一个对象，如果 data 直接是一个对象的话，那么一旦修改其中一个组件的数据，其他组件相同数据就会被改变，而 data 是函数的话，每个 vue 组件的 data 都因为函数有了自己的作用域，互不干扰。

computer和watch

3.1 computed特性
1.是计算值，
2.应用：就是简化tempalte里面{{}}计算和处理props或$emit的传值
3.具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数

3.2 watch特性(监听属性的变化)
1.是观察的动作，
2.应用：监听props，$emit或本组件的值执行异步操作
3.无缓存性，页面重新渲染时值不变化也会执行

总结

当监听某个变量变化时,用watch
某个变量需要有其他属性计算得来,就用computed