随着 TienChin 项目视频的录制，松哥总算也要静下心来，认真捋一捋 Vue3 中的各种新特性了，然后再和小伙伴们进行共享，其实 Vue3 中仍是带来了很多新鲜的玩意，今日咱们就不卷 Jjava编译器av监控安装流程a 了，来卷卷html简单网页代码前端。

以下内容是一个 Java 猿对 Vue3 的理解，主要是应用层java怎么读面上，假如有专业的前端小伙伴，请轻拍。

1. script 写法

进入到 Vue3 年代，最明显的感触便是在一个 .vue 文件中，script 标签的写法大变样了。曾经在 Vue2 中，咱们都是这样写的：

<script>
    export default {
        name: "SysHr",
        data() {
            return {
                //
            }
        },
        mounted() {
            //
        },
        methods: {
            deleteHr(hr) {
                //
            },
            doSearch() {
                //
            }
        }
    }
</script>

不过到了 Vue3 里面，这个写法变了，变成下面这样了：

<template>
    <div>
        <div>{{a}}</div>
        <div>{{result}}</div>
        <button @click="btnClick">clickMe</button>
    </div>
</template>
<script>
    import {ref} from 'vue';
    import {onMounted,computed} from 'vue'
    export default {
        name: "MyVue01",
        setup() {
            const a = ref(1);
            const btnClick=()=>{
                a.value++;
            }
            onMounted(() => {
                a.value++;
            });
            const result = computed(()=>{
                return Date.now();
            });
            return {a,btnClick,result}
        }
    }
</script>

先从大的前端开发方面来看，细节完成咱们后面再细监控家用远程手机聊。

大的方面，便是在这个 exporjava培训t default 中，今后就只有两个元素了，name 和 setup，咱们曾经的各种方法界说、生命周期函数、核算特点等等，都写在 setup 中，而且需要在 setup 中回来，setup 中回来了什么，上面的 template 中就能用什么。前端和后端哪个工资高

这html标签属性大全种写法略微有点费事，所以还有一种简化的写法，像下面这样：

<template>
    <div>
        <div>{{a}}</div>
        <div>{{result}}</div>
        <button @click="btnClick">clickMe</button>
    </div>
</template>
<script setup>
    import {ref} from 'vue';
    import {onMounted, computed} from 'vue'
    const a = ref(1);
    const btnClick = () => {
        a.value++;
    }
    onMounted(() => {
        a.value++;
    });
    const result = computed(() => {
        return Date.now();
    });
</script>

这种html个人网页完整代码写法便是直接在 script 标签中参加 setup，然后在 script 标签中该怎样界说就怎样界说，也不必 return 了。这个场景，又有点 jQuery 的感觉了。

上面这个完成Java里有几个细节，咱们再来具体说说。

2. 生命周期

首先便是生命周期函数的写法。

曾经 Vue2 里的写监控app下载法有一个专业名词叫做 options API，现在在 Vue3 里也有一个专业名词叫做 composition API。在 Vue3 中，这些对应的生命周期函数都要先从 vue 中导出，然后调用并传入一个回调函数，像咱们上一末节那样写。

下图这张表格展示了 opti变量类型有哪些ons API 和 comhtml标签position API 的一一对应联系：

options API composition监控摄像头 API
beforeCreate Not变量 Needed
created No前端t Needed
mounted onMounted
beforjava环境变量配置eUpdate onBeforeUpdate
updated onUpdated
beforeUnmou变量之间的关系nt onBeforeUhtml标签nmount
un变量的定义mounted onUnmounted
errorCaptured onErrorCaptured
renderTracked onRenderTracked
renderTriggered onRe前端和后端nderT变量之间的关系riggered
activahtmlted onActivated
deactivated监控系统 onDeactivated

想用哪个生命周期函数，就从 vue 中导出这个函数，然后传入回一个回调就能够运用了。例如榜首末节中松哥给咱们监控摄像头举的 onMounted 的用法。

3. 核算特点

除了生命周期函数，核算特点、watch 监听等等，java语言用法也和生命周期函数html代码类似，需要先从 vue 中导出，导出之后，也是传入一个回调函数就能够运用了。上文有例子，我就不再烦琐了。

像 watch 的监控，写法如下：

<script>
    import {ref} from 'vue';
    import {onMounted,computed,watch} from 'vue'
    export default {
        name: "MyVue01",
        setup() {
            const a = ref(1);
            const btnClick=()=>{
                a.value++;
            }
            onMounted(() => {
                a.value++;
            });
            const result = computed(()=>{
                return Date.now();
            });
            watch(a,(value,oldValue)=>{
                console.log("value", value);
                console.log("oldValue", oldValue);
            })
            return {a,btnClick,result}
        }
    }
</script>

导入 watch 之后，然后直接运用即可。

4. ref 于 reactive

上面的例子中还有一个 ref，这个玩意也需要跟咱们介绍下。

在 Vue2 里面，假如咱java模拟器们想要界说呼应式数据，一般都是写在 data 函数中的，类似下面这样：

<script>
    export default {
        name: "SysHr",
        data() {
            return {
                keywords: '',
                hrs: [],
                selectedRoles: [],
                allroles: []
            }
        }
    }
</script>

但是在 Vue3 里面，你已经看不到 data 函数了，那怎样界说呼应式数javascript据呢？便是经过 ref 或者 reactive 来界说了。

在榜首末节中，咱们便是经过 ref 界说了一个名为 a 的呼应式变量。

这个 ahtml简单网页代码 在 scrip前端t 中写的时分，有一个 value 特点，不html标签过在 HTML 中引证的时分，是没有 value 的，可千万别写成了 {{a.value}}，咱们再来回顾下上文的案例：

<template>
    <div>
        <div>{{a}}</div>
        <button @click="btnClick">clickMe</button>
    </div>
</template>
<script>
    import {ref} from 'vue';
    export default {
        name: "MyVue04",
        setup() {
            const a = ref(1);
            const btnClick=()=>{
                a.value++;
            }
            return {a,btnClick}
        }
    }
</script>

现在便是经过这样的方法来界说呼应式目标，修正值的变量值时分，需要用 a.value，但是真正的上面的 template 节点中拜访的时分是不需要 value 的（注意，函数也得回来后才能在页面中运用）。

和 Vue2 比较，这种写法有一个很大的好处便是在方法中引证的时分不必再写 this 了。

ref 一般用来界说原始数据类型，像 String、Number前端开发需要学什么、BigInt、B监控安装流程oolean、Symbol、Null变量是什么意思、Undefined 这些。

假如你想界说目标，那么能够运用 reactive 来界说，如下：

<template>
    <div>
        <div>{{a}}</div>
        <button @click="btnClick">clickMe</button>
        <div>{{book.name}}</div>
        <div>{{book.author}}</div>
    </div>
</template>
<script>
    import {ref, reactive} from 'vue';
    export default {
        name: "MyVue04",
        setup() {
            const a = ref(1);
            const book = reactive({
                name: "三国演义",
                author: "罗贯中"
            });
            const btnClick = () => {
                a.value++;
            }
            return {a, btnClick,book}
        }
    }
</script>

这前端面试题儿界说了 book 目标，book 目标中包含了 name 和 author 两个特点。

有的时分，你可能批量把数据界说好了，但是在拜访的时分却希望直接拜访，那么咱们能够运用数据打开，像下面这样：

<template>
    <div>
        <div>{{a}}</div>
        <button @click="btnClick">clickMe</button>
        <div>{{name}}</div>
        <div>{{author}}</div>
    </div>
</template>
<script>
    import {ref, reactive} from 'vue';
    export default {
        name: "MyVue04",
        setup() {
            const a = ref(1);
            const book = reactive({
                name: "三国演义",
                author: "罗贯中"
            });
            const btnClick = () => {
                a.value++;
            }
            return {a, btnClick,...book}
        }
    }
</script>

这样，在上面拜访的时分，就能够直接拜访 name 和 author 两个特点了，就不必增加 book 前缀了。

不过！！！

这种写法其实有一个小坑。

比如我再增加一个按钮，如下：

<template>
    <div>
        <div>{{a}}</div>
        <button @click="btnClick">clickMe</button>
        <div>{{name}}</div>
        <div>{{author}}</div>
        <button @click="updateBook">更新图书信息</button>
    </div>
</template>
<script>
    import {ref, reactive} from 'vue';
    export default {
        name: "MyVue04",
        setup() {
            const a = ref(1);
            const book = reactive({
                name: "三国演义",
                author: "罗贯中"
            });
            const btnClick = () => {
                a.value++;
            }
            const updateBook=()=>{
                book.name = '123';
            }
            return {a, btnClick,...book,updateBook}
        }
    }
</script>

这个前端和后端哪个工资高时分点击更新按钮，你会发现没反应！因为用了数据打开之后，呼应式就失效了javaee。所以，关于这种打开HTML的数据，应该再用 toRefs 来处理下，如下：

<template>
    <div>
        <div>{{a}}</div>
        <button @click="btnClick">clickMe</button>
        <div>{{name}}</div>
        <div>{{author}}</div>
        <button @click="updateBook">更新图书信息</button>
    </div>
</template>
<script>
    import {ref, reactive, toRefs} from 'vue';
    export default {
        name: "MyVue04",
        setup() {
            const a = ref(1);
            const book = reactive({
                name: "三国演义",
                author: "罗贯中"
            });
            const btnClick = () => {
                a.value++;
            }
            const updateBook = () => {
                book.name = '123';
            }
            return {a, btnClick, ...toRefs(book),updateBook}
        }
    }
</script>

当然，假如你将 setup 直接写在了 script 标签java编译器中，那么能够直接按照如下方法来打开数据：

<template>
    <div>
        <div>{{a}}</div>
        <button @click="btnClick">clickMe</button>
        <div>{{name}}</div>
        <div>{{author}}</div>
        <button @click="updateBook">更新图书信息</button>
    </div>
</template>
<script setup>
    import {ref, reactive, toRefs} from 'vue';
    const a = ref(1);
    const book = reactive({
        name: "三国演义",
        author: "罗贯中"
    });
    const btnClick = () => {
        a.value++;
    }
    const updateBook = () => {
        book.name = '123';
    }
    const {name, author} = toRefs(book);
</script>

5. 小结

好啦，今日就和小伙伴们共享了 Vue3 中几个新鲜的玩法～作为咱们 TienChin 项目的基础（Vue 基本用法在 vhr 中都已经讲过了，所以这儿就不再赘述了），当然，Vue3 和 Vue变量名2 还有其他一些差异，这些咱们都将在 TienChin 项目视频中和小伙伴们再细心共享。

  • 我正在参加技能社区创作者签约计划招募活动，点击链接报名投稿。