vue3中setup的注意点

Author: Panyue-genkiyo

06_src_setup的两个注意点/App.vue

@@ -0,0 +1,37 @@
+<template>
+  <!--vue3的组件模版结构可以没有根标签-->
+  <Demo @hello="showHelloMsg" msg="hello" school="wust">
+    <template v-slot:qwe>
+      没事
+    </template>
+    <template v-slot:asd>
+      love you
+    </template>
+  </Demo>
+</template>
+
+<script>
+import Demo from "./components/Demo";
+export default {
+  name: 'App',
+  components: {Demo},
+  setup(){
+    return {
+      showHelloMsg(value){
+        alert(`你好,${value}`);
+      }
+    }
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

06_src_setup的两个注意点/components/Demo.vue

@@ -0,0 +1,47 @@
+<template>
+  <!--vue3的组件模版结构可以没有根标签-->
+  <h1>我是app组件</h1>
+  <h1>我叫{{ person.name }}, {{ person.age }}岁</h1>
+  <button @click="test">测试触发一次demo的自定义事件</button>
+</template>
+
+<script>
+import { reactive } from 'vue';
+export default {
+  name: 'Demo',
+  beforeCreate() {
+    console.log('----@bc');
+  },
+  props: ['msg', 'school'],
+  emits:['hello'],
+  setup(props, context){
+    // console.log('----setup');
+    // console.log(this); ///undefined
+    console.log(props); //props: 外部给组件丢的参数 => 响应式(Proxy实例)
+    //表演的舞台(setup)
+    //准备数据 data
+    //ref实现响应式(基本类型)也是采用Object.definedProperty()来实现的 getter和setter
+    // let name = ref('py'); //ref引用对象(RefImpl)实例
+    // let age = ref(21);
+    //ref实现响应式(对象类型)也是采用Proxy来实现(proxy) 这里如果就算是用ref也是借助了reactive
+    let person = reactive({
+      name: 'py',
+      age: 21,
+    });
+
+    // console.log(context, context.attrs); 相当于vue2中的$attrs
+    // console.log(context,context.slots); 插槽
+
+    //返回一个对象
+    return {
+      person,
+      test(){
+        context.emit('hello', 666); //触发自定义事件
+      }
+    }
+  }
+}
+</script>
+
+<style>
+</style>

06_src_setup的两个注意点/main.js

@@ -0,0 +1,20 @@
+//引入不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
+//注意在这里无法像vue2那样去书写了，(这里并不兼容)
+import { createApp } from 'vue'
+import App from './App.vue'
+
+//创建应用实例对象---app类似于vue2中vm,但app比vm更轻
+const app = createApp(App);
+// console.log(app);
+//挂载
+app.mount('#app');
+
+// setTimeout(() => {
+//     app.unmount("#app");
+// },2000)
+
+// //vue2写法
+// const vm = new Vue({
+//     render: h=> h(App)
+// });
+// vm.$mount('#app')