vue3setup和监听的使用

package-lock.json

@@ -23,64 +23,64 @@
       }
     },
     "@intlify/core-base": {
-      "version": "9.1.6",
-      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.1.6.tgz",
-      "integrity": "sha512-d5GDPpsQbqPkisSJA5b6nJFEkalY/IHAd7vOLNd/Sj4YaNRzXtInu2FoqKiOv8e/lQnXGTpurdCZg5Jxq1Gsxw==",
+      "version": "9.1.7",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.1.7.tgz",
+      "integrity": "sha512-q1W2j81xbHyfKrNcca/CeJyf0Bcx4u9UDu05l7AaiJbqOseTme2o2I3wp1hDDCtmC7k7HgX0sAygyHNJH9swuQ==",
       "requires": {
-        "@intlify/devtools-if": "9.1.6",
-        "@intlify/message-compiler": "9.1.6",
-        "@intlify/message-resolver": "9.1.6",
-        "@intlify/runtime": "9.1.6",
-        "@intlify/shared": "9.1.6",
-        "@intlify/vue-devtools": "9.1.6"
+        "@intlify/devtools-if": "9.1.7",
+        "@intlify/message-compiler": "9.1.7",
+        "@intlify/message-resolver": "9.1.7",
+        "@intlify/runtime": "9.1.7",
+        "@intlify/shared": "9.1.7",
+        "@intlify/vue-devtools": "9.1.7"
       }
     },
     "@intlify/devtools-if": {
-      "version": "9.1.6",
-      "resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.1.6.tgz",
-      "integrity": "sha512-m8Api+kh+BtFa2FZ/JjIdr1ibsGGqBjdKCzWo5BZecEUxBquIeOQZwpokPh/0K5j+/PZleFXkVAMC5mNt+9WdA==",
+      "version": "9.1.7",
+      "resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.1.7.tgz",
+      "integrity": "sha512-/DcN5FUySSkQhDqx5y1RvxfuCXO3Ot/dUEIOs472qbM7Hyb2qif+eXCnwHBzlI4+wEfQVT6L0PiM1a7Er/ro9g==",
       "requires": {
-        "@intlify/shared": "9.1.6"
+        "@intlify/shared": "9.1.7"
       }
     },
     "@intlify/message-compiler": {
-      "version": "9.1.6",
-      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.1.6.tgz",
-      "integrity": "sha512-DR8645VOrVK6x/8tkaCpHnckMAIcoOgeNS5j0wB12RfZoXYQp7vAXMaOP511KMll2mXCREgIB0ojpajiof7yzQ==",
+      "version": "9.1.7",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.1.7.tgz",
+      "integrity": "sha512-JZNkAhr3O7tnbdbRBcpYfqr/Ai26WTzX0K/lV8Y1KVdOIj/dGiamaffdWUdFiDXUnbJRNbPiOaKxy7Pwip3KxQ==",
       "requires": {
-        "@intlify/message-resolver": "9.1.6",
-        "@intlify/shared": "9.1.6",
+        "@intlify/message-resolver": "9.1.7",
+        "@intlify/shared": "9.1.7",
         "source-map": "0.6.1"
       }
     },
     "@intlify/message-resolver": {
-      "version": "9.1.6",
-      "resolved": "https://registry.npmjs.org/@intlify/message-resolver/-/message-resolver-9.1.6.tgz",
-      "integrity": "sha512-UUnbawQa5U9sffd5wRIscqtyY1xWlwJbyfwCLPEWLvBhyAnCwPYlvaHGnnO0CSi0fzJTVwlV9DYzobh3agDeMA=="
+      "version": "9.1.7",
+      "resolved": "https://registry.npmjs.org/@intlify/message-resolver/-/message-resolver-9.1.7.tgz",
+      "integrity": "sha512-WTK+OaXJYjyquLGhuCyDvU2WHkG+kXzXeHagmVFHn+s118Jf2143zzkLLUrapP5CtZ/csuyjmYg7b3xQRQAmvw=="
     },
     "@intlify/runtime": {
-      "version": "9.1.6",
-      "resolved": "https://registry.npmjs.org/@intlify/runtime/-/runtime-9.1.6.tgz",
-      "integrity": "sha512-U1QZ+TPf3kQQvWo4BA2mj3cHAxMRHXNTBhu2u+deh6ubTqXdZ19XGBTMSasrXG6RE+zSio9oM+ndoLja7JGtPg==",
+      "version": "9.1.7",
+      "resolved": "https://registry.npmjs.org/@intlify/runtime/-/runtime-9.1.7.tgz",
+      "integrity": "sha512-QURPSlzhOVnRwS2XMGpCDsDkP42kfVBh94aAORxh/gVGzdgJip2vagrIFij/J69aEqdB476WJkMhVjP8VSHmiA==",
       "requires": {
-        "@intlify/message-compiler": "9.1.6",
-        "@intlify/message-resolver": "9.1.6",
-        "@intlify/shared": "9.1.6"
+        "@intlify/message-compiler": "9.1.7",
+        "@intlify/message-resolver": "9.1.7",
+        "@intlify/shared": "9.1.7"
       }
     },
     "@intlify/shared": {
-      "version": "9.1.6",
-      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.1.6.tgz",
-      "integrity": "sha512-6MtsKulyfZxdD7OuxjaODjj8QWoHCnLFAk4wkWiHqBCa6UCTC0qXjtEeZ1MxpQihvFmmJZauBUu25EvtngW5qQ=="
+      "version": "9.1.7",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.1.7.tgz",
+      "integrity": "sha512-zt0zlUdalumvT9AjQNxPXA36UgOndUyvBMplh8uRZU0fhWHAwhnJTcf0NaG9Qvr8I1n3HPSs96+kLb/YdwTavQ=="
     },
     "@intlify/vue-devtools": {
-      "version": "9.1.6",
-      "resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.1.6.tgz",
-      "integrity": "sha512-UdNovg4OML9rIr1sOGZzTfNr1nUy4UQpDf5ni4dNC93T6FIkVJz0n1Np7Vp7e6gDjcmufRYcV99tEwjQSN9+5A==",
+      "version": "9.1.7",
+      "resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.1.7.tgz",
+      "integrity": "sha512-DI5Wc0aOiohtBUGUkKAcryCWbbuaO4/PK4Pa/LaNCsFNxbtgR5qkIDmhBv9xVPYGTUhySXxaDDAMvOpBjhPJjw==",
       "requires": {
-        "@intlify/message-resolver": "9.1.6",
-        "@intlify/runtime": "9.1.6",
-        "@intlify/shared": "9.1.6"
+        "@intlify/message-resolver": "9.1.7",
+        "@intlify/runtime": "9.1.7",
+        "@intlify/shared": "9.1.7"
       }
     },
     "@types/estree": {
@@ -652,13 +652,13 @@
       }
     },
     "vue-i18n": {
-      "version": "9.1.6",
-      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.1.6.tgz",
-      "integrity": "sha512-FEC4HZkTH6QRIu/A0wlo0VS/GH3w/fuCC6xfvoC8IyhhtbG9A+go9NfW+HZ1ZXdAcO4EWcVQi04M+iSwuxgixw==",
+      "version": "9.1.7",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.1.7.tgz",
+      "integrity": "sha512-ujuuDanoHqtEd4GejWrbG/fXE9nrP51ElsEGxp0WBHfv+/ki0/wyUqkO+4fLikki2obGtXdviTPH0VNpas5K6g==",
       "requires": {
-        "@intlify/core-base": "9.1.6",
-        "@intlify/shared": "9.1.6",
-        "@intlify/vue-devtools": "9.1.6",
+        "@intlify/core-base": "9.1.7",
+        "@intlify/shared": "9.1.7",
+        "@intlify/vue-devtools": "9.1.7",
         "@vue/devtools-api": "^6.0.0-beta.7"
       }
     },

package.json

@@ -9,7 +9,7 @@
     "axios": "^0.21.1",
     "sass": "^1.35.1",
     "vue": "^3.0.5",
-    "vue-i18n": "^9.1.6",
+    "vue-i18n": "^9.1.7",
     "vue-router": "^4.0.10",
     "vuex": "^4.0.2"
   },

src/App.vue

 <template>
   <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="Hello Vue 3 + Vite" />
+  <hello-world msg="Hello Vue 3 + Vite" >111</hello-world>
   <router-view></router-view>
 </template>
 
 <script setup>
-import HelloWorld from './components/HelloWorld.vue'
+import { ref,provide, onMounted, readonly , watch, toRefs,computed,reactive ,watchEffect  } from 'vue'
+import helloWorld from './components/HelloWorld.vue'
+//响应式provide ，如果改动inject里面的数据也会改动，如果非响应就不会改动
+ const location = ref('North Pole')
+  const geolocation = reactive({
+    longitude: 90,
+    latitude: 135
+  })
+  const updateLocation = () => {
+    location.value = 'South Pole'
+  }
+  provide('location', readonly(location))
+  provide('geolocation', readonly(geolocation))
+  provide('updateLocation', updateLocation)
+
+// console.log($t('zh.serviceshop'));
 
 // This starter template is using Vue 3 experimental <script setup> SFCs
 // Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md

src/components/HelloWorld.vue

@@ -14,27 +14,36 @@
     Edit
     <code>components/HelloWorld.vue</code> to test hot module replacement.
   </p>
-</template>
-
-<script setup>
-import { defineProps, reactive } from 'vue'
 
-defineProps({
-  msg: String
-})
-
-const state = reactive({ count: 0 })
+  <slot></slot>
+</template>
 
-// /shzl/api/v1/party/personnel
-</script>
 <script>
+import { defineProps, reactive } from 'vue'
 import axios from 'axios';
 export default {
+  setup(props, context) {
+    // Attribute (非响应式对象)
+    console.log(context.attrs)
+
+    // 插槽 (非响应式对象)
+    console.log(context.slots)
+
+    // 触发事件 (方法)
+    console.log(context.emit)
+    const state = reactive({ count: 0 })
+    return{
+      state
+    }
+  },
   data(){
    return{
 
    } 
   },
+  props:{
+    msg: ''
+  },
   created(){
     // console.log(this.$store.state.name);
     axios.get(`/shzl/api/v1/party/personnel`).then(res=>{

src/i18n/i18n.js

@@ -2,8 +2,8 @@ import {createI18n} from 'vue-i18n'
 import lang from './index'
 
 const i18n = createI18n({
-    locale:localStorage.lang||'cn',
-    message:lang
+    locale:localStorage.lang||'zh',
+    messages:lang
 })
 
 export default i18n
\ No newline at end of file

src/main.js

@@ -7,11 +7,13 @@ import store from '@/store';
 
 import api from '@/request/api.js'
 
-import i18n from './i18n/i18n'
+import i18n from './i18n/i18n.js'
 
 const createVue = createApp(App)
 
 createVue.config.globalProperties.$api = api
 
-createVue.use(store).use(api).use(router).use(i18n).mount('#app')
+createVue.use(store).use(api).use(router).use(i18n)
+console.log(i18n);
+createVue.mount('#app')
 

src/pages/home.vue

+<template>
+    <div>
+        home
+        <p>{{$t('serviceshop')}}</p>
+        <p @click="updateUserLocation">{{userLocation}}</p>
+        <p>{{userGeolocation.longitude}},{{userGeolocation.latitude}}</p>
+        <teleport to="body">
+            <div v-if="modalOpen" class="modal">
+                <div>
+                I'm a teleported modal! 
+                (My parent is "body")
+                <button @click="modalOpen = false">
+                    Close
+                </button>
+                </div>
+            </div>
+        </teleport>
+        
+    </div>
+</template>
+
+<script>
+import { ref, inject,onMounted, readonly , watch, toRefs,computed,reactive ,watchEffect  } from 'vue'
+
+export default {
+    setup (props,context) {
+        //setup inject的使用
+        const userLocation = inject('location', 'The Universe')
+        const userGeolocation = inject('geolocation')
+        const updateUserLocation = inject('updateLocation')
+
+        // 使用 `toRefs` 创建对prop的 `user` property 的响应式引用,否则会报错
+        const { user } = toRefs(props)
+
+        let counttt = 133356
+
+        const repositories = ref([])
+        const getUserRepositories = () => {
+        // 更新 `prop.user` 到 `user.value` 访问引用值
+        repositories.value = 2324234
+        }
+
+        onMounted(getUserRepositories)
+
+        // 在用户 prop 的响应式引用上设置一个侦听器
+        watch(user, getUserRepositories)
+
+        const searchQuery = ref('')
+        const repositoriesMatchingSearchQuery = computed(() => {
+        return repositories.value.filter(
+            repository => repository.name.includes(searchQuery.value)
+        )
+        }) 
+
+        return {
+            repositories,
+            getUserRepositories,
+            counttt,
+            repositoriesMatchingSearchQuery,
+            userLocation,
+            userGeolocation,
+            updateUserLocation
+        }
+    },
+    props: {
+        user:''
+    },
+    components: {
+
+    },
+    data() {
+        return {
+            modalOpen:false,
+        };
+    },
+    watch: {
+
+    },
+    computed: {
+
+    },
+    created() {
+        console.log(this.counttt);
+        this.modalOpen = true
+        /**
+         * reactive对于ref的使用是引用，相互改变会相互影响.如果不是ref那么就不会影响
+         */
+        const count = ref(0)
+        const state = reactive({
+            count
+        })
+
+        console.log(state.count)//0
+        state.count = 1
+        console.log(count.value)//1
+        console.log(state.count)//1
+
+        /**
+         * 使用toRefs对reactive进行解构
+         */
+
+        const book = reactive({
+            author: 'Vue Team',
+            year: '2020',
+            title: 'Vue 3 Guide',
+            description: 'You are reading this book right now ;)',
+            price: 'free'
+        })
+        let { author, title } = toRefs(book)
+
+        title.value = 'Vue 3 Detailed Guide' // 我们需要使用 .value 作为标题，现在是 ref
+        console.log(book.title) // 'Vue 3 Detailed Guide'
+
+        /**
+         * readonly 防止更改响应式对象,在copy上转换original 会触发侦听器依赖,转换copy 将导失败并导致警告
+         */
+        const original = reactive({ count: 0 })
+        const copy = readonly(original)
+
+        original.count++
+        console.log(original.count)//1
+        copy.count++ // 警告: "Set operation on key 'count' failed: target is readonly."
+
+        /**
+         * 响应式的计算,只读和可写
+         */
+        //只读
+        const plusOne = computed(() => count.value+'zhesji')
+        console.log(plusOne.value) // 1zhesji
+
+        //可写
+        const plusOne1 = computed({
+            get: () => count.value + 1,
+            set: val => {
+                count.value = val - 1
+            }
+        })
+
+        plusOne1.value = 1
+        console.log(count.value) // 0
+
+        /**
+         * 响应式的监听使用 watchEffect 方法，它立即执行传入的一个函数，
+         * 同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。
+         * 
+         * 当 watchEffect 在组件的 setup() 函数或生命周期钩子被调用时，
+         * 侦听器会被链接到该组件的生命周期，并在组件卸载时自动停止。
+         */
+        const stop = watchEffect(() => console.log(count.value))
+
+        const inter = setInterval(()=>{
+            count.value++
+        },1000)
+
+        setTimeout(()=>{
+            clearInterval(inter)
+            stop()
+        },5000)
+
+        /**
+         * watch监听,单个监听
+         */
+        watch(count, (count, prevCount) => {
+            console.log(count);
+        })
+
+        /**
+         * watch监听,多个监听
+         */
+        watch([count, plusOne1], ([count, plusOne1], [prevCount, preplusOne1]) => {
+             console.log(count,plusOne1);
+        })
+    },
+    mounted() {
+
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style scoped>
+.modal{
+    width: 400px;
+    margin: 0 auto;
+    background-color: #fff;
+}
+</style>

src/pages/index.vue

 <template>
-    <div>
+    <div @click="gotopage">
         index
     </div>
 </template>
@@ -28,6 +28,7 @@ export default {
         console.log(11);
         this.$api.shzl.part_person_all().then(res=>{
             console.log(res);
+            
         })
         
     },
@@ -35,7 +36,9 @@ export default {
 
     },
     methods: {
-
+        gotopage(){
+            this.$router.push('/home')
+        }
     },
 };
 </script>

src/router/index.js

@@ -8,6 +8,11 @@ const routes = [
     name: 'index',  // 路由名称
     component: () => import("@/pages/index.vue"), //映射组件
   },
+  {
+    path: '/home',  //path  链接路径
+    name: 'home',  // 路由名称
+    component: () => import("@/pages/home.vue"), //映射组件
+  },
 ]
 
 const router = createRouter({