分享5个关于 Vue 的小知识，希望对你有所帮助（二）

大家好，上一篇文章《分享5个关于 Vue 的小知识，希望对你有所帮助（一）》，今天我们继续分享5个关于 Vue 的小知识，希望对你有所帮助。

1、如何深度监视对象数组的内容变化？

我们可以使用watcher来深度监视对象数组并使用Vue.js计算更改。

例如，我们可以编写：

App.vue

<template>
  <div id="app">
    <Person :person="person" v-for="person in people" :key="person.id"></Person>
  </div>
</template>
<script>
import Person from "@/components/Person";
export default {
  name: "App",
  components: {
    Person,
  },
  data() {
    return {
      people: [
        { id: 0, name: "Bob", age: 27 },
        { id: 1, name: "Frank", age: 32 },
        { id: 2, name: "Joe", age: 38 },
      ],
    };
  },
};
</script>

Person.vue

<template>
  <div class="hello">
    <div class="person">
      {
    
    { p.name }}
      <input type="text" v-model="p.age" />
    </div>
  </div>
</template>
<script>
export default {
  name: "Person",
  props: {
    person: Object,
  },
  data() {
    return {
      p: {},
    };
  },
  watch: {
    p: {
      handler(newValue) {
        console.log(newValue.id);
        console.log(newValue.age);
      },
      deep: true,
    },
  },
  mounted() {
    this.p = { ...this.person };
  },
};
</script>

在App.vue中，我们有一个people数组，用于使用v-for呈现Person组件。

我们将person作为person prop的值传递。

然后在Person中，我们添加了props属性来接受person prop。

我们有一个p响应式属性，我们在mounted hook中将其设置为person的副本作为其值。

在watch属性中的p watcher中，我们记录newValue值。

我们将deep选项设置为true，以便让我们监视对象中的更改。

在模板中，我们呈现p.name，并将p.age绑定为文本输入的输入值。

现在，当我们在文本输入中键入时，p watcher应该运行并记录newValue.age值。

2、如何在Vue.js的组件中调用全局自定义函数？

我们可以创建混入（mixins）使助手函数在Vue.js的单文件组件中全局可用。

例如，我们可以这样编写：

<template>
  <!--在HTML中展示capitalizedName这个计算属性-->
  <div id="app">
    {
    
    { capitalizedName }}
  </div>
</template>

<script>
// 引入Vue库
import Vue from "vue";

// 创建一个全局混入，添加了一个可以在任何组件中使用的方法capitalizeFirstLetter
Vue.mixin({
  methods: {
    // 这个方法的作用是将传入的字符串的首字母转化为大写
    capitalizeFirstLetter: (str) => str[0].toUpperCase() + str.slice(1),
  },
});

// 导出当前Vue组件
export default {
  // 组件名称
  name: "App",
  // 组件的data属性，定义了组件的内部状态
  data() {
    return {
      // 定义了一个名为name的状态，初始值为"james"
      name: "james",
    };
  },
  // 计算属性，这是根据组件状态或者其它计算属性派生出的值
  computed: {
    // capitalizedName计算属性，会调用我们在全局混入中定义的capitalizeFirstLetter方法，对name状态进行处理
    capitalizedName() {
      return this.capitalizeFirstLetter(this.name);
    },
  },
};
</script>

我们通过调用Vue.mixin并传入一个对象来创建我们自己的混入。

这将创建一个全局混入，所以它会自动在所有组件中可用。

在这个对象中，我们设置了methods属性，它是带有一些组件方法的对象。

它有一个capitalizeFirstLetter方法，这个方法接收一个字符串并返回一个首字母大写的字符串。

接下来，我们在data方法中返回name这个响应式属性。

然后我们创建了一个名为capitalizedName的计算属性，它调用了混入中的capitalizeFirstLetter方法并将this.name作为参数，返回处理后的结果。

接着，我们将capitalizedName添加到模板中进行渲染。

最后，我们看到结果显示为‘James’。

3、在Vue.js中使用setTimeout

我们可以通过将箭头函数作为参数传递给setTimeout来在Vue.js中使用它。

例如，我们可以编写：

<template>
  <div id="app">
    <button @click="setShow">show</button>
    <p v-if="show">hello</p>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      show: false,
    };
  },
  methods: {
    setShow() {
      setTimeout(() => {
        this.show = true;
      }, 2000);
    },
  },
};
</script>

我们有一个名为setShow的方法，它调用setTimeout并传入一个箭头函数作为第一个参数，该箭头函数调用this.show为true。

第二个参数是在毫秒中运行第一个参数的回调之前的延迟时间。

我们必须使用箭头函数才能在回调函数中获得正确的this值。

这个this应该是组件实例，因为箭头函数不绑定它们的this值。

我们将setShow设置为@click指令的值，以便在单击按钮时运行它。

因此，当我们单击它时，div会显示，因为show变为true。

4、如何防止点击按钮时，点击事件冒泡到父级元素？

当在Vue.js中点击一个包含按钮的元素时，我们可以使用self修饰符来防止点击事件冒泡到父元素。

例如，我们可以这样写：

<template>
  <div id="app">
    <div class="parent" @click.self="showAlert('parent clicked')">
      <span class="child" @click="showAlert('child1 clicked')">Child1</span>
      <span class="child" @click="showAlert('child2 clicked')">Child2</span>
      <span class="child" @click="showAlert('child3 clicked')">Child3</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    showAlert(str) {
      alert(str);
    },
  },
};
</script>
<style scoped>
.parent {
  padding: 20px;
}
</style>

我们在外部div元素上添加self修饰符，这样点击事件就只会限定在父级div中。

当我们点击每个div或span元素时，将会运行showAlert方法。

5、使用Vue.js滚动到一个元素

有时候，我们需要使用Vue.js滚动到一个元素。 在本文中，我们将看看如何使用Vue.js滚动到一个元素。

我们可以通过为想要滚动到的元素分配一个引用来使用Vue.js滚动到该元素然后，我们可以在分配给引用的元素上调用scrollIntoView方法来滚动到该元素。例如，我们可以编写：

<template>
  <div id="app">
    <button @click="scrollToElement">scroll to last</button>
    <p v-for="n of 100" :key="n" :ref="n === 100 ? 'last' : undefined">
      {
    
    { n }}
    </p>
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    scrollToElement() {
      const [el] = this.$refs.last;
      if (el) {
        el.scrollIntoView({ behavior: "smooth" });
      }
    },
  },
};
</script>

我们有一个名为scrollToElement的按钮，用于调用该方法。然后我们有一些p元素，其中最后一个引用被分配给最后一个p元素。在scrollToElement方法中，我们通过解构使用this.$refs.last获取分配给最后一个引用的元素。然后我们调用el.scrollIntoView，并使用一个具有behavior属性的对象来更改滚动行为。

结论

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。