Vue-动态组件、混入、v-if和v-for、组合式函数

最新推荐文章于 2023-10-25 14:48:43 发布

weixin_45753087

最新推荐文章于 2023-10-25 14:48:43 发布

阅读量510

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_45753087/article/details/127795124

版权

动态组件

动态渲染组件

默认情况下，当组件在切换的时候都会重新创建组件，但是有些时候我们希望组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。

演示

html代码

  <div id="app">
    {{msg}}
    <button @click="current='my-a'">A组件</button>
    <button @click="current='my-b'">B组件</button>
    <button @click="current='my-c'">C组件</button>
    <!-- 静态is值为注册的组件的名称 -->
    <keep-alive>
      <component :is="current"></component>
    </keep-alive>
  </div>

js代码

    let myA = {
      template: `
        <div>
          A组件内容
        </div>
      `,
      created() {
        console.log('A组件created');
      },
   	  activated(){
				alert('进入A组件了');
		},
		deactivated(){
				alert('退出a组件了');
		},
		errorCaptured(){
            console.log('子组件异常')
		}
    };
    let myB = {
      template: `
        <div>
          B组件内容
        </div>
      `,
      created() {
        console.log('B组件created');
      }
    };
    let myC = {
      template: `
        <div>
          C组件内容
        </div>
      `,
      created() {
        console.log('C组件created');
      }
    };
    Vue.component('my-a', myA)
    Vue.component('my-b', myB)
    Vue.component('my-c', myC)
    new Vue({
      el: '#app',
      data: {
        msg: 'hello',
         current:myA,
       
      },
      methods: {}
    })

混入

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

1.全局混入

Tip: 不建议使用全局注册混入对象，一旦使用全局混入，它将会影响以后创建的每一个vue实例。

混入规则

当组件和混入对象有同名选项时，这些选项会以恰当的方式合并

数据 data 数据对象在混入时，会进行合并，发生冲突时，保留组件的数据
值为对象 methods computed等在混入时，methods会合并成为一个对象，如果对象的键名发生冲突，则保留组件对象的键值对
生命周期钩子函数同名的钩子函数会被合并为一个数组，依次都会被调用，但是混入对象的钩子函数先被调用

演示

html代码

      <div id="app">
        {{msg}}
        <my-a></my-a>
      </div>

js代码

    let mixin = {
      // 数据
      data() {
        return {
          mixinData: '混入的数据',
          obj: { name: 'zhangsan', gender: '男' }
        }
      },
      // 生命周期
      created() {
        console.log('混入的created');
      },
      // 方法
      methods: {
        mixinMethod() {
          console.log('mixinMethod方法');
        },
        test() {
          console.log('test 混入');
        }
      }
    };
   
    // 全局混入
    Vue.mixin(mixin)
    let vm = new Vue({
      el: '#app',
      // 局部混入
      // mixins: [mixin],
      data: {
        msg: 'hello',
        obj: { age: 12, name: 'lisi' }
      },
      created() {
        console.log('created...');
      },
      methods: {
        test() {
          console.log("test");
        }
      }
    })

v-if与v-for

不推荐同时使用

在Vue2中，当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名

组合式函数

在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数

组合式API

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
</head>
<body>
	<div id="app">
		{{msg}}
		<div v-for="item in article">
			{{item.name}}-{{item.introduce}}
			<img :src="item.url" alt="">
		</div>
	</div>
	<script>
		let ref=Vue.ref;
		let reactive=Vue.reactive;
		let onMounted=Vue.onMounted;
		let app=Vue.createApp({
			data(){
				return {
					msg:'hello Vue3',
				}
			},
			// 组合式api
			setup(props){
				let article=ref([]);
				let loadArticle=async ()=>{
					let res = await axios.get('http://121.199.0.35:8888/index/carousel/findAll');
					console.log(res);
					article.value=res.data.data
				}
				onMounted(loadArticle());
				return {
					article
				}
			},
		});
		app.mount('#app');
	</script>
</body>
</html>