^

liuyonghu.com

Stay hungry,Stay foolish,Stay young

刘勇虎的官方网站

网站内容包含大前端、服务器开发、Python开发、iOS开发、Android开发、网站维护等技术文章。专注于分享技术经验，职业心得体会，IT优秀文章与教程创作。

vue3使用总结

ref 与 reactive

ref:

接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property .value

示例：


const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

如果将对象分配为 ref 值，则通过 reactive 函数使该对象具有高度的响应式。

参考: https://v3.cn.vuejs.org/api/refs-api.html#unref

reactive

返回对象的响应式副本

toRefs 与 reactive

比较代码区别


    const form = reactive({
      name: '',
    });

    // form.name = "123";

    var { name } = form;
    name = '123';

    // const formRefs = toRefs(form);
    // var { name } = formRefs;
    // name.value = '123';

在 setup 前边添加 async 会怎样？为什么？

使用 x-template 的异同

核心代码：

VUE2

<body>
    <div id="app" style="width: 900px; height: 900px">
        {{message}}
        <todo>
            <template v-slot:default>
                default --
            </template>
            <template v-slot:msg1="{msg1}">
                <b> msg1 == {{ msg1 }}</b>
            </template>
        </todo>
        <script type="text/x-template" id="my-template">
            <div>
                <div>
                    <slot :msg='msg'></slot>
              </div>
                <p>----</p>
                <div>
                    <slot name='msg1' :msg1='msg1'></slot>
                </div>
            </div>
        </script>
    </div>
 <!-- <script type="text/x-template" id="my-template">
        <div>
            <div>
                <slot :msg='msg'></slot>
          </div>
            <p>----</p>
            <div>
                <slot name='msg1' :msg1='msg1'></slot>
            </div>
        </div>
    </script> -->
    <script>
        window.onload = () => {
            Vue.component("todo", {
                template: '#my-template',
                data() {
                    return {
                        msg1: " msg1 child component ",
                        msg: " msg child component ",
                    };
                },
            });

            var app = new Vue({
                el: "#app",
                data() {
                    return {
                        message: "123",
                        user: { lastName: "666", firstName: "666" },
                        //   slotProps:{ user: { lastName: "666",firstName: "666" }}
                    };
                },
            });
        };
    </script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</body>

即： script 标签放在 div 内或者外部都可以

VUE3 版本：3.2.4

    <div id="app" style="width: 900px; height: 900px">
        {{message}}
        <todo>
            <template v-slot:default>default --</template>
            <template v-slot:msg1="{msg1}">
                <b>msg1 == {{ msg1 }}</b>
            </template>
        </todo>
    </div>
    <script type="text/x-template" id="my-template">
        <div>
              <slot :msg='msg'></slot>
        </div>
          <p>----</p>
          <div>
              <slot name='msg1' :msg1='msg1'></slot>
          </div>
    </script>
    <script>
        window.onload = () => {
            var app = Vue.createApp({
                data() {
                    return {
                        message: '123',
                        user: { lastName: '666', firstName: '666' },
                    };
                },
            });

            app.component('todo', {
                template: '#my-template',
                data() {
                    return {
                        msg1: ' msg1 child component ',
                        msg: ' msg child component ',
                    };
                },
            });
            app.mount('#app');
        };
    </script>
    <script src="https://cdn.staticfile.org/vue/3.2.4/vue.global.prod.min.js"></script>

_即： script 标签只能放在 div 外 , body 内 _

vue 中控制 keep-alive 缓存

<template>
  <router-view v-slot="{ Component, route }">
    <transition>
      <keep-alive :include="getIncludeTags()">
        <component :is="Component" :key="route.fullPath" />
      </keep-alive>
    </transition>
  </router-view>
</template>
<script lang="ts">
// @ is an alias to [表情]c
import { defineComponent } from 'vue';
import { useUIStore } from '@/甩头ore/ui';

export default defineComponent({
  // 已启用类型推断
  name: '',
  components: {},
  setup() {
    const uiStore = useUIStore();
    const getIncludeTags = () => uiStore.includeTags;
    return {
      getIncludeTags,
    };
  },
});
</script>

包含/排除

vue 中的属性

component vue 文件中初始化的 props 值 默认会被 component 使用时 直接绑定的值覆盖，且不会触发 watch 方法

Vite

Vite bug 504 (Outdated Optimize Dep):

disable cache 即可

更改打包入口的方式

是直接修改 index.html 中的应用路径

Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.More info: https://sass-lang.com/d/legacy-js-api 警告

        export default defineConfig({
    css: {
        preprocessorOptions: {
        less: {
            math: 'parens-division',
        },
        styl: {
            define: {
            $specialColor: new stylus.nodes.RGBA(51, 197, 255, 1),
            },
        },
        scss: {
            api: 'modern-compiler', // or "modern", "legacy"
            importers: [
            // ...
            ],
        },
        },
    },
    })
1.本站所有文章除特殊声明外均为原创，未经允许禁止转载!
2.站内文章如有侵权异议，请与我联系，我将在确实后处理！
换个声音
停止播放