vue从入门到放弃

Posted 2021-08-31 胡庚申—全栈工程师

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue从入门到放弃相关的知识，希望对你有一定的参考价值。

----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------

今日学习内容：

1、动态组件

2、异步组件

3、keep-alive缓存组件

4、全局组件

5、公共组件函数调用

动态组件

dynamicComponentDemo.vue

<template>
  <div>
    <h1>动态组件</h1>
    <!-- 写法一： -->
    <!-- <slotDemo/> -->
    <!-- 写法二： -->
    <component :is="slotDemo"/>
    <!-- 动态遍历多个组件 -->
    <div v-for="(item,index) in arr" :key="index">
        <component :is="item"/>
    </div>
  </div>
</template>
<script>
import slotDemo from './slotDemo.vue'
import nextTickDemo from './nextTickDemo.vue'
import provideAndInjectDemo from './provideAndInjectDemo.vue'
import slotDemo2 from './slotDemo2.vue'
export default {
  name: "",
  components: {
    slotDemo,
    nextTickDemo,
    provideAndInjectDemo,
    slotDemo2
  },
  data: () => ({
    slotDemo:'slotDemo',
    arr:[
      'nextTickDemo',
      'provideAndInjectDemo',
      'slotDemo2'
    ]
  })
}
</script>

App.vue

<template>
  <div id="app">
    <dynamicComponentDemo/>
  </div>
</template>

<script>
import dynamicComponentDemo from './components/advanceDemo/dynamicComponentDemo.vue'
export default {
  name: 'App',
  components: {
    dynamicComponentDemo
  }
}
</script>

异步组件

asynComponentDemo.vue

<template>
  <div>
    <h1>异步组件</h1>
    <p>使用场景：1.加载大组件；2.需要后置性的组件</p>
    <p>作用：提升性能、提升用户体验</p>
    <slotDemo/>
  </div>
</template>
<script>
// import slotDemo from './slotDemo.vue'
export default {
  components: {
    // slotDemo
    // 异步组件写法一：
    // slotDemo:()=>{
    //   return import('./slotDemo.vue')
    // }
    // 异步组件写法二：
    slotDemo:()=> import('./slotDemo.vue')
  }
}
</script>

App.vue

<template>
  <div id="app">
    <asynComponentDemo/>
  </div>
</template>

<script>
import asynComponentDemo from './components/advanceDemo/asynComponentDemo.vue'
export default {
  name: 'App',
  components: {
    asynComponentDemo
  }
}
</script>

keep-alive缓存组件

keepAlivedDemo.vue

<template>
  <div>
    <h1>keep-alive 标签</h1>
    <button type="button" @click="changeFun('a')">A</button>
    <button type="button" @click="changeFun('b')">B</button>
    <button type="button" @click="changeFun('c')">C</button>

    <keep-alive>
      <comA v-if="tap === 'a'"/>
      <comB v-if="tap === 'b'"/>
      <comC v-if="tap === 'c'"/>
    </keep-alive>

    <p>keep-alive使用场景：用于缓存组件、频繁切换，不需要重复渲染的情况，也是vue常用性能优化方案之一</p>
    <p>复杂的组件可以使用keep-alive，简单的可以使用v-show来提高性能</p>
  </div>
</template>
<script>
import comA from './comA.vue'
import comB from './comB.vue'
import comC from './comC.vue'
export default {
  name: "",
  components: {
    comA,
    comB,
    comC
  },
  data: () => ({
      tap:'a'
  }),
  methods: {
    changeFun(val) {
      this.tap = val
    }
  }
}
</script>

comA.vue(comB.vue和comC.vue跟comA一样)

<template>
  <div>
    组件A
  </div>
</template>
<script>
export default {
  mounted() {
    console.log('A mounted');
  },
  activated(){
    console.log('keepalive加载');
  },
  deactivated(){
    console.log('keepalive离开');
  },
  destroyed() {
      console.log('A destroyed');
  }
}
</script>

App.vue

<template>
  <div id="app">
    <keepAlivedDemo/>
  </div>
</template>

<script>
import keepAlivedDemo from './components/advanceDemo/keepAlivedDemo.vue'
export default {
  name: 'App',
  components: {
    keepAlivedDemo
  }
}
</script>

全局组件

allComponentDemo.vue

<template>
  <div>
      <h1>全局注册组件</h1>
      <loading/>
  </div>
</template>
<script>
// 全局注册的组件，可以在项目任意地方使用，不需要注册和引入
export default {
  name: "",
  data: () => ({

  })
}
</script>

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 全局自定义指令
Vue.directive('foc',{ // 自定义指令v-foc
  inserted:el=>{
    el.focus() // 聚焦
  }
});

// 全局注册组件
import Loading from './components/advanceDemo/loading.vue'
Vue.component('Loading',Loading) // 第一个参数是组件名；第二个参数是组件

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <allComponentDemo/>
  </div>
</template>

<script>
import allComponentDemo from './components/advanceDemo/allComponentDemo.vue'
export default {
  name: 'App',
  components: {
    allComponentDemo
  }
}
</script>

公共组件函数调用

toastCom.vue

<template>
  <div class="wrap">
    <div>{{text}}</div>
    <div>{{temp}}</div>
  </div>
</template>
<script>
export default {
  // props 写法一：
  // props: {
  //   text:String
  // },
  // props 写法二：
  props: {
    text:{
      type:String,
      default(){
        return ''
      }
    }
  },
  // props 写法三：
  // props: ['text']
  data: () => ({
      temp:'Hello World'
  })
}
</script>
<!-- scoped表示只在当前样式生效 -->
<style lang="scss" scoped>
.wrap{
   color: #fff;
   background: :rgba(0,0,0,0.8);
   width: 200px;
   padding: 10px;
   position: fixed;
   left:50%;
   top:50%;
   margin-left: -100px;
   margin-top: -60px;
   border-radius: 10px;
}
</style>

App.vue

<template>
  <div id="app">
    <toastCom text="这是一个标题"/>
  </div>
</template>

<script>
import toastCom from './components/advanceDemo/toastCom.vue'
export default {
  name: 'App',
  components: {
    toastCom
  }
}
</script>

toastCom.js

// 1.引入组件和vue
import Vue from 'vue'
import toastCom from './toastCom.vue'
// 利用vue.extend函数，传入vue组件，返回构造函数
const toastConstractor = Vue.extend(toastCom)
// 2.利用构造函数，创建一个实例
function toastFun(){
  const toastEle = new toastConstractor({ // 构造函数转成ele节点
    el: document.createElement('div'), // 创建一个div
    data(){
      return {
        text:text
      }
    }
  })
  document.body.appendChild(toastEle.$el)
}

// 3.函数挂在原型上
function expToastFun(){
  Vue.prototype.$toast = toastFun()
  // 把函数挂在全局vue实例上，这样任何地方都可以通过￥toast来调用
}

export default expToastFun

// Vue.prototype.$toast = toastFun()
// this.$toast 调用

main.js

import Vue from 'vue'
import App from './App.vue'
import toastJs from './components/advanceDemo/toastCom.js'

Vue.config.productionTip = false

// 全局自定义指令
Vue.directive('foc',{ // 自定义指令v-foc
  inserted:el=>{
    el.focus() // 聚焦
  }
});

// 全局注册组件
import Loading from './components/advanceDemo/loading.vue'
Vue.component('Loading',Loading) // 第一个参数是组件名；第二个参数是组件

// 全局extend注册组件，并函数调用
Vue.use(toastJs)

new Vue({
  render: h => h(App),
}).$mount('#app')

toastTest.vue

<template>
  <div>
    <h1>测试toast函数调用</h1>
  </div>
</template>
<script>
export default {
  mounted(){
    this.$toast('This is toast')
  }
}
</script>

App.vue

<template>
  <div id="app">
    <toastTest/>
  </div>
</template>

<script>
import toastTest from './components/advanceDemo/toastTest.vue'
export default {
  name: 'App',
  components: {
    toastTest
  }
}
</script>

vue从入门到放弃

动态组件

dynamicComponentDemo.vue

App.vue

异步组件

asynComponentDemo.vue

App.vue

keep-alive缓存组件

keepAlivedDemo.vue

comA.vue(comB.vue和comC.vue跟comA一样)

App.vue

全局组件

allComponentDemo.vue

main.js

App.vue

公共组件函数调用

toastCom.vue

App.vue

toastCom.js

main.js

toastTest.vue

App.vue

更多文章