Vue基础总结

叁歲伎倆 2023-02-21 11:46 9阅读 0赞

**01**

<table> 
 <tbody> 
  <tr> 
   <td colspan="1"><p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9PalpmWGtUTTYxNU1jYTNZWEhXZHVzMXJRQmZpYllnaWJjeHlJUlRpY0RrblFoRW1XNVZFMVBrcWxNSG5rVTFWMXdmVEhSM2JGQ1ZhbzBOaWJCeUxoV3BEWVEvNjQw?x-oss-process=image/format,png"></p></td> 
   <td colspan="1"><p>请阐述一下Vue 的八大生命周期？</p></td> 
  </tr> 
 </tbody> 
</table>

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空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。

**02**

<table> 
 <tbody> 
  <tr> 
   <td colspan="1"><p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9PalpmWGtUTTYxNU1jYTNZWEhXZHVzMXJRQmZpYllnaWJjeHlJUlRpY0RrblFoRW1XNVZFMVBrcWxNSG5rVTFWMXdmVEhSM2JGQ1ZhbzBOaWJCeUxoV3BEWVEvNjQw?x-oss-process=image/format,png"></p></td> 
   <td colspan="1"><p>对slot 插槽的理解和你怎么使用的呢？<br></p></td> 
  </tr> 
 </tbody> 
</table>

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

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>
        
      </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>
    
    
        
        <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>

![format_png][]

**Java患者**

长按识别二维码关注我们

更多精彩内容可回复关键词

关键词1 | 关键词2 | 关键词3

![format_png 1][]

![format_png][]

点一下你会更好看耶

![format_png 2][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9PalpmWGtUTTYxNU1jYTNZWEhXZHVzMXJRQmZpYllnaWJjYWNPM0xSM2tBRVNiR3lON3d2SFFBMnVjTVV6Tmc3eHI1U0tGbksyVEU5SjN0aHJIUVBhdExnLzY0MA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9PalpmWGtUTTYxNU1jYTNZWEhXZHVzMXJRQmZpYllnaWJjMTRMWHA4Y2VEZW1tVmRwTlFTc21LMHFDakRpYVRna0c2aWNnbUxjMW5LS3FlOVBYNkYxTDk5MVEvNjQw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9PalpmWGtUTTYxNU1jYTNZWEhXZHVzMXJRQmZpYllnaWJjaWJuaWJLWmNxeFk3WXNDa2VFSHVJa3JUZ2dkcGljOXpuV1VKNnJOMmlhVGlib1B4Q05OTXh2dWVoMGcvNjQw?x-oss-process=image/format,png