[基础学习]Vue+高阶函数+父子组件通信+插槽

mvc mvvm设计模式

m后台数据 v图形界面 c事件绑定

计算属性 Computed

// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

computed: {
  now: function () {
    return Date.now()
  }
}

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
总结
计算属性运算能力强 如果内容和名字没有发生改变 计算属性会立即返回之前的计算结果，而不必再次执行函数。

侦听器Watch

<div id="watch-example">
        <p>
            Ask a yes/no question:
            <input v-model="question">
        </p>
        <p></p>
    </div>

 var watchExampleVM = new Vue({
        el: '#watch-example',
        data: {
            question: '',

        },
        watch: {
            // 如果 `question` 发生改变，这个函数就会运行
            question(val) {
                console.log(val);
                this.answer(val)
            }
        },

        methods: {
            answer(val) {
                console.log('answer' + val);
            }
        }
    })

事件绑定

当我们需要循环的索引和内容 同时也需要事件对象的时候可以$event

重点思想-点击列表-当前列表变色

1.绑定点击事件

<li v-for='item,index in starts' @click='toggle(index)' :key='index' :class="{active: index === currentIndex}">

2.声明一个 currentIndex: 0 由于每次循环都会自动创建一个li
这段代码 会依次比对 :class="{active: index === currentIndex}"

3.每次点击把点击到的index给currentIndex即可实现点击思维

 toggle(index) {
                this.currentIndex = index
            }

v-model 双向绑定表单

原理
利用v-on:input监听用户的输入事件 一旦输入就会调用

        <input type="text" v-model='message'>//第二种		
        <input type="text" :value='message' @input='inputChange'>//第二种
        <input type="text" :value='message' @input='message = $event.target.value'>//第三种方式
        <h2>{{message}}</h2>

        data: {
            message: '哈哈哈'
        },
        methods: {
            inputChange(e) {
                this.message = e.target.value
            },
        }

值绑定

总结把后台获取的数据值绑定过去

修饰符

高阶函数-数组遍历方式

for in遍历的是可枚举的属性；for of遍历迭代器

filter过滤 对数组的每一项做出判断

true:当返回true时，函数内部会自动将这次回调的n加入到新的数组中
false:当返回false时， 函数内部会过滤掉这次的n

map计算 对数组中的每一项做出变化

 const nums = [10, 20, 111, 222, 444, 40, 50]
    const new123 = nums.filter((item) => item < 100).map((item) => item * 2 )
    console.log(new123);//(4) [20, 40, 80, 100]

reduce 对数组中所有内容进行汇总 至少两个值 有三个

[20, 40, 80, 100]
reduce((preValue,Value)=>{},0)前一个与当前的 0是汇总的状态
第一次 pre 0 : value 20 ;0+20
第二次 pre 20 :value 40; 20+40=60
第三次 pre 60 : value 80; 60 + 80 = 140
地四处 pre140 : value 100 ; 140 +100 = 240
需求过滤小于<100的值 对其每一个值*2 再让它们全部先加

const nums = [10, 20, 111, 222, 444, 40, 50]
    const new123 = nums.filter((item) => item < 100).map((item) => item * 2).reduce((pre, now) => pre + now)
    console.log(new123);240

组件化

组件的注册方式 了解

**全局组件注册 可以在多个挂载的Vue实例使用 **

局部组件注册
在实例内部注册 只能给app这个实例中使用


根组件

父子组件通信

子组件想要获取父组件的数据 需要通过几步操作 props属性保存的是父组件传过来的值
父组件需要获取子组件的数据 ； 子组件可以用$emit发射过来
子组件内类data必须是函数才能保存变量 为什么组件data 必须是函数?
因为函数是复杂数据类型 在栈中储存的是地址，在堆中储存的才是值 每个组件实例存储的值相互不影响
组件实例每次调用data方法 都会返回这个Obj 返回的是同一个对象 那么所有组件获取的值都是同步的 我们希望是组件是独立的

组件中data为什么需要用函数

父传子 props

父传子一般用于什么场景呢? 我们请求后台数据只需要在父组件中请求一次即可，而其他的子组件想要数据不需要重复请求 对服务器压力很大 ，可以通过获取父组件的数据即可
一共两步 先在子中设置props 然后在组件实例绑定 左边子 右边父

有三种方式书写props 数组 和这两张图片

子传父 $emit(自定义事件，参数)

一共三步骤

this.$childern 不推荐 父直接访问子组件的方法methods 和 属性data;

根组件内 打印即可

这里就拿到了子组件的方法和元素

this.$refs 推荐 父直接拿子组件的方法methods 和 属性data;

$ parent访问父组件的方法和 属性；$ root访问根组件的方法实例

兄弟组件之间共享数据:EventBus

插槽

具名插槽

slot name='名称’放最深处占位 ；v-slot:名称 用来写一些可以改变的内容


上面简洁的暂时

中间 v-slot 用来 写动态的

最底层 slot name 用来占位 不写东西

作用域的插槽

插槽的作用域 组件在实例中 就只能通过实例的数据改变 子组件的数据无法改变

作用域插槽的使用 子传父

**可以用来获取到 子组件插槽内部的数据 **

先把 数据绑定给插槽自定义的:名字 在使用插槽的时候 v-slot=‘slot’ 这个slot就是我们的数据了

Router

创建路由步骤

路由重定向