ref 引用 & 数组方法

目录

ref 引用

获取 DOM 元素

引用组件实例

初步实现按钮和文本框的按需展示

this.$nextTick 的应用场景

updated 不可用的原因

数组方法

some 循环

foreach 循环

some 循环

every 循环

reduce 基本用法

reduce 简化写法

---

jQuery 简化了程序员操作 DOM 的过程

在 vue 中，程序员不需要操作 DOM，只需要将数据维护好即可。即数据驱动视图

在 vue 项目中，不建议安装和使用 jQuery

当 vue 项目中，需要进行 DOM 操作时，则需要拿到页面上某个 DOM 元素的引用

ref 引用

用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用

每一个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用

默认情况下，组件的 $refs 指向一个空对象

获取 DOM 元素

• 通过 ref 指定的引用名，可以获取 dom 元素
• ref 指定的引用名必须唯一，类似于 id 选择器

<template>
  <div class="app-container">
    <!-- 通过 ref 指定的引用，可以获取 dom 元素 -->
    <!-- 相当于 id 或者 class 等选择器 -->
    <!-- ref 指定的引用名不能重名，类似于 id 选择器 -->
    <h1 ref="myh1">App 根组件</h1>
    <button @click="showThis">打印 this</button>
  </div>
</template>

<script>
    export default {
        methods: {
            showThis() {
                // this 是当前 app 组件的实例对象
                // console.log(this.$refs.myh1);
                this.$refs.myh1.style.color = 'red';
            }
        },
    }
</script>

引用组件实例

• 在 App.vue 组件中，对 Left 组件标签设置 ref 引用，即可通过 App.vue 组件的 this 获取  Left.vue 中的实例对象，进而获取组件的数据和方法

<!-- 被引用组件 Left.vue -->
<template>
  <div class="left-container">
    <h3>Left 组件 --- {{ count }}</h3>
    <button @click="count++">+1</button>
    <button @click="resetCount">重置</button>

  </div>
</template>

<script>
    export default {
        data() {
            return {
                count: 0,
            }
        },
        methods: {
            resetCount() {
                this.count = 0;
            }
        },
    }
</script>

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <button @click="showThis">打印 this</button>
    <button @click="onReset">重置 Left 组件的 count 值</button>
    <hr />

    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <!-- 当组件标签添加 ref 引用之后，即可通过 app.vue 的 this 获取该组件标签所代表的组件的实例对象 -->
      <Left ref="comLeft"></Left>
    </div>
  </div>
</template>

<script>
    import Left from "@/components/Left.vue"
    export default {
        methods: {
            // 点击按钮，重置 Left 组件的 count 值
            onReset() {
                // this.$refs.comLeft.resetCount();
                this.$refs.comLeft.count = 0;
            }

        },
        components: {
            Left,
        }
    }
</script>

初步实现按钮和文本框的按需展示

<template>
  <div class="app-container">
    <!-- @blur 失去焦点，展示按钮 -->
    <input type="text" v-if="inputVisible" @blur="showButton">
    <button v-else @click="showInput">展示输入框</button>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                // 控制输入框和按钮的按需展示
                // 默认值为 false,表示默认展示按钮，隐藏输入框
                inputVisible: false,
            }
        },
        methods: {
            // 点击按钮，展示输入框
            showInput() {
                this.inputVisible = true;
            },
            showButton() {
                this.inputVisible = false;
            }
        },
    }
</script>

this.$nextTick 的应用场景

• 上述案例中，为了让文本框展示后自动获得焦点
• 当数据发生改变时，该数据并没有立刻渲染到 DOM 结构中，此时使用更新后的某些 DOM 元素的引用将会报错（因为此时该元素还未被渲染到 DOM 结构中）
• 组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行
• 通俗的理解是：等组件的 DOM 更新完成之后（updated 之后），再执行 cb 回调函数
• 从而保证 cb 回调函数可以操作到最新的 DOM 元素

<template>
  <div class="app-container">
    <!-- 引用名最好以 Ref 结尾，维护较方便 -->
    <input type="text" v-if="inputVisible" @blur="showButton" ref="iptRef">
    <button v-else @click="showInput">展示输入框</button>
  </div>
</template>

<script>
    export default {
        methods: {
            // 点击按钮，展示输入框
            showInput() {
                // 切换 boolean 值，让文本框展示出来
                this.inputVisible = true;
                // 这行代码执行完毕之后，页面还未更新，文本框将要却还没有展示出来
                // 页面上看到的还是 button，input 还未展示
                // 因此 iptRef 还处于 undefined 
                // this.$refs.iptRef.focus();
                // console.log(this.$refs.iptRef); // undefined
                this.$nextTick(() => {
                    this.$refs.iptRef.focus();
                });
            },
        },
    }
</script>

updated 不可用的原因

• 在上述场景中，点击之后，相应的 DOM 元素发生改变
• 是在特定条件下发生的
• 而 updated 只要数据发生改变就会自动触发
• 生命周期函数必须和 data、methods 平级

<script>
    export default {
        updated() {
          this.$nextTick(() => {
             this.$refs.iptRef.focus();
          });
        },
    }
</script>

updated 在数据发生改变时必被触发，当 inputVisible 值改变为 true 之时，updated 随数据的改变而被触发，文本框展示，自动获得焦点

当我们将鼠标移开之后，本应将文本框隐藏，按钮展示。但此时，inputVisible 的值再次发生改变，此时 updated 再次被触发，自动获得焦点。这与我们原本的设定发生矛盾，程序报错

数组方法

some 循环

foreach 循环

• foreach 循环只要开始，即使找到了目标元素，也不会中途终止循环，而是会继续将循环执行完毕

    <script>
        const arr = ["关羽", "张飞", "赵云", "马超", "黄忠"];
        // foreach 循环只要开始，即使找到目标元素，还会继续将循环执行完毕
        // 效率较差
        arr.forEach((item, index) => {
            console.log('ok');
            if (item === '张飞') {
                console.log(index);
            }
        });
    </script>

some 循环

• some 循环在找到目标元素之后，通过 return true; 固定语法可以立刻终止循环

    <script>
        const arr = ["关羽", "张飞", "赵云", "马超", "黄忠"];
        arr.some((item, index) => {
            console.log('ok');
            if (item === '张飞') {
                console.log(index);
                // 找到目标元素之后，通过 return true 终止 some 循环
                // return true; 固定写法
                return true;
            }
        });
    </script>

every 循环

• 只有当数组中的每一项都满足条件时，才返回 true；否则返回 false

    <script>
        const arr = [{
            id: '1',
            name: '张三',
            state: true
        }, {
            id: '2',
            name: '张四',
            state: true
        }, {
            id: '3',
            name: '张五',
            state: false,
        }, ];
        // every 循环：只有数组中的每一项都满足要求，返回 true
        // 只要有一项不满足要求，返回 false 
        // 判断数组中所有的项是否都被选中
        const result = arr.every(item => item.state);
        console.log(result);
    </script>

reduce 基本用法

    <script>
        // reduce 语法
        arr.filter(item => item.state).reduce((累加结果, 当前循环项) => {}, 初始值);
    </script>

    <script>
        const arr = [{
            id: '1',
            name: '香蕉',
            state: true,
            price: 3,
            count: 1
        }, {
            id: '2',
            name: '苹果',
            state: true,
            price: 8,
            count: 2
        }, {
            id: '3',
            name: '西瓜',
            state: false,
            price: 2,
            count: 3
        }, ];

        // 把购物车中已选中的水果(state=true)，总价累加起来
        // let amt = 0; // 总价
        // arr.filter(item => item.state).forEach(item => {
        //     amt += item.price * item.count;
        // });
        // console.log(amt);

        // reduce 方法 
        // arr.filter(item => item.state).reduce((累加结果, 当前循环项) => {}, 初始值);
        const result = arr.filter(item => item.state).reduce((amt, item) => {
            return amt += item.price * item.count;
        }, 0);
        console.log(result);
    </script>

reduce 简化写法

    <script>
        // reduce 语法
        // arr.filter(item => item.state).reduce((累加结果, 当前循环项) => {}, 初始值);
        // 简化写法
        const result = arr.filter(item => item.state).reduce((amt, item) => amt += item.price * item.count, 0);
        console.log(result);
    </script>