Vue基础总结

最新推荐文章于 2023-04-12 21:16:53 发布

新时代Java农民工

最新推荐文章于 2023-04-12 21:16:53 发布

阅读量153

点赞数

本文链接：https://blog.csdn.net/zejava/article/details/107039591

版权

请阐述一下Vue 的八大生命周期？

1.beforeCreate(创建前)：通过new Vue() 创建实例出来之后就会执行beforeCreate钩子函数。这个时候，数据还没有挂载呢，只是一个空壳。无法访问到数据和$el不存在，computed和watch上的数据均不能访问。一般不做操作

2.created(创建后)：可以进行数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。这个时候已经可以使用数据，也可以更改数据。然而，挂载阶段还没开始，$el 属性目前不可见。什么叫还没开始挂载，也就是说，模板还没有被渲染成html，也就是这时候通过id什么的去查找页面元素是找不到的

3.beforeMount(载入前)：虚拟dom创建完成，马上就要渲染。我们能发现el还是 {{message}}，这里就是应用的是虚拟Dom技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。但还是无法进行DOM操作

4.mounted(载入后)：el 被新创建的 vm.$el 替换，真实的Dom挂载完毕，数据完成双向绑定，可以访问到Dom节点，使用$ref属性对Dom进行操作。

Tips:el与$el的区别：el是为了将实例化后的Vue挂载到指定的dom元素中。在实例挂载之后，元素可以用 vm.$el 访问

5.beforeUpdate(更新前)：就是响应式数据发生更新，dom还没有刷新

6.updated(更新后)：就是响应式数据发生更新，update是dom已经刷新了

7.beforeDestroy(销毁前)：这个钩子发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器。

8.destroyed(销毁后)：发生在实例销毁之后，这个时候只剩下了dom空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。

对slot 插槽的理解和你怎么使用的呢？

插槽分为匿名插槽，具名插槽和作用域插槽

1.匿名插槽：

子组件代码：

<template>
  <div style="border: 1px solid green;">
    <h4>这是Child组件</h4>
    <!-- 用来存放父组件的内容 -->
    <slot></slot>
    <p>我喜欢编程</p>
  </div>
</template>
<script>
export default {};
</script>
<style>
</style>

父组件代码：

<template>
  <van-panel title="普通插槽">
    <Child>hello child,我来自父组件</Child>
  </van-panel>
</template>


<script>
import Child from "./Child";
export default {
  components: {
    Child
  }
};
</script>


<style>
</style>

2.具名插槽：

子组件代码：

<template>
  <div class="flex jc-sa" style="border: 1px solid green;">
    <!-- 接收父组件对应的内容 -->
    <slot name="left"></slot>
    <!-- <slot name="right"></slot> -->
  </div>
</template>


<script>
export default {};
</script>


<style>
</style>

父组件代码：

<template>
  <van-panel title="具名插槽">
    <Child>
      <p slot="left">
        <van-button>左边</van-button>
      </p>
      <p slot="right">
        <van-button>右边</van-button>
      </p>
    </Child>


    <!-- vant的slot -->
    <div slot="footer">
      <van-button type="primary">点击</van-button>
    </div>
  </van-panel>
</template>


<script>
import Child from "./Child";
export default {
  components: {
    Child
  }
};
</script>


<style>
</style>

3.作用域插槽：

子组件代码：

<template>
  <ul>
    <slot name="slotName"
    v-for="item in propName"
    :dos="item.do"></slot>
  </ul>
</template>
<script>
  export default{
    props:['propName']
  }
</script>

父组件代码：

<template>
  <div>
    <child :propName="items">
      <!--作用域插槽也可以具名！-->
      <li
      slot="slotName"
      slot-scope="scopeName">
        {{scopeName.dos}}
      </li>
    </child>
  </div>
</template>
<script>
  import child from "./components/child.vue"
  export default{
    components:{child},
    data(){
      return{
        items:[
          {do:'play'},
          {do:'eat'},
          {do:'sleep'},
          {do:'play'},
          {do:'eat'},
          {do:'sleep'}
        ]
      }
    }
  }
</script>