标签：return name setup let Vue3 aaa ref

Vue3

npm init vite

Vite与Webpack

1. webpack打包是递归依赖,构建AST抽象语法树,再把抽象语法树转成浏览器可识别的代码
   Vite通过劫持浏览器请求,将文件进行分解和整合，无需打包编译，速度很快。
2. webpack使用NodeJS实现，Vite使用Go语言编写的esbuild预构建依赖，速度快至少10倍。
3. webpack生态更加强大，插件丰富，Vite伴随Vue3刚刚诞生，还需要沉淀和版本迭代。

main.js发生的变化

import { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')

index.html

vite通过html5原生的type=”module”属性来支持ES6的模块化语法

<script type="module" src="/src/main.js"></script>

子传父/父传子

<!-- 
  子传父：:list="gogo"
  1. 将子元素引入 ：import son from "./son.vue";
  2. 设置要传递的值 ：let gogo = [1, 2, 3];
  3. 将子元素放到明面上：<son :list="gogo"></son>
  4. 去子页面拿到父页面传来的值 ：props: ["list"],setup(props){。。。}
  5. 在子元素上写入<p>{{ 从父元素拿到的值 }}</p>
 -->
 <!-- 
   父传子：
   1. 将子元素引入 ：import son from "./son.vue";
   2. 设置要接收传递的标签：<son @newTodo="play"></son>
   3. 给父元素创建一个函数，获得的数据来自子元素：let play = (name) => {}
   4. 子元素设置触发标签 ：<button @click="play">你好</button>
   5. 子元素设置响应事件 ：  <button @click="play">你好</button>
  -->

<!-- 父组件 -->
<template>
    <!-- 允许有多个根标签 -->
  <div>
    <p>123</p>
    <son :list="gogo" @newTodo="play"></son>
  </div>
</template>

<script>
import son from "./son.vue";
export default {
  setup() {
    let gogo = [1, 2, 3];
    let play = (name) => {
      alert("你好:" + name);
    };
    return {
      gogo,
      play,
    };
  },
  components: {
    son,
  },
};
</script>

<!-- 子组件 -->
<template>
  <p>123</p>
  <p>{{ gogo }}</p>
  <button @click="play">你好</button>
</template>

<script>
export default {
  props: ["list"],
  setup(props, context) {
    let gogo = props.list;
    // let plays = ;
    let play = function (name) {
      name = "李尚恒";
      context.emit("newTodo", name);
    };
    return {
      gogo,
      play,
    };
  },
};
</script>
<style scoped lang="scss"></style>

响应式数据之ref

• 创建一个普通的响应式数据

<template>
  <p>{{ a }}</p>
</template>

<script>
import { reactive, ref, toRefs } from "vue";

export default {
  setup() {
    var a = ref(123);
    console.log(a.value);
    a.value = 456;
    return {
      a,
    };
  },
};
</script>

<style scoped lang="scss"></style>

• 给某个标签或组件添加ref，可以获得该组件/标签

响应式数据之 reactive

<template>
  {{ obj.name }}--{{ obj.age }}
  <br />
  <input type="text" v-model="obj.name" />
  <input type="number" v-model="obj.age" />
</template>

<script>
import { reactive } from "@vue/reactivity";
export default {
  setup() {
    var obj = reactive({
      name: "",
      age: "",
    });
    return {
      obj,
    };
  },
};
</script>
<style scoped lang="scss"></style>

计算属性computed

<!-- computed -->
<template>
  <input type="text" v-model="aaa" placeholder="原数据" />
  <p>{{ aaa }}</p>
  <p>{{ bbb }}</p>
</template>

<script>
import { computed, ref } from "vue";
export default {
  setup() {
    let aaa = ref(null);
    let bbb = computed(() => {
      return aaa.value * 2;
    });
    return {
      aaa,
      bbb,
    };
  },
};
</script>
<style scoped lang="scss"></style>

监视器 watch

<script>
import { computed, ref, watch } from "vue";
export default {
  setup() {
    let aaa = ref(null);
    let bbb = computed(() => {
      return aaa.value * 2;
    });
    watch(
      aaa,
      (newValue, oldValue) => {
        console.log(newValue);
        console.log(oldValue);
      },
      { immdiate: true, deep: true }
    );
    return {
      aaa,
      bbb,
    };
  },
};
</script>

监视器 watchEffect

<script>
import { computed, ref, watch, watchEffect } from "vue";
export default {
  setup() {
    let aaa = ref(null);
    let bbb = computed(() => {
      return aaa.value * 2;
    });
    watch(
      aaa,
      (newValue, oldValue) => {
        console.log(newValue);
        console.log(oldValue);
      },
      { immdiate: true, deep: true }
    );
    // 
    watchEffect(() => {
      console.log(aaa.value, bbb.value);
    });
    return {
      aaa,
      bbb,
    };
  },
};
</script>

钩子函数

Vue2	Vue3
beforeCreate	setup
created	setup
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destoryed	onUnmounted
activated	onActivatide
deactivated	onDeactivatide
errorCaptured	onErrorCaptured
	on

provide/inject

<!-- 父组件 -->  
setup() {
    provide("color", "color : red");
	}

<!-- 子孙组件 -->
<p :style="colors">XXX</p>
······js代码
setup() {
let colors = inject("color");
	}
······

标签：return,name,setup,let,Vue3,aaa,ref
来源： https://blog.csdn.net/WJLSH123/article/details/121001901

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。