Vue的计算属性/侦听器/组件用法详解

最新推荐文章于 2025-04-05 12:19:39 发布

原创最新推荐文章于 2025-04-05 12:19:39 发布 · 610 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue的计算属性 computed,必须return,computed有缓存数据的效果,,利于减少性能的消耗,但是当真实数据(data)发生改变,计算属性才会更新.

传统写法:

学习了vue的计算属性就可以如图.必须return:

在vue中不推荐v-for和v-if一起使用,因为v-for的优先级更高,想要解决这个方法就要使用计算属性,如下:

vue的计算属性侦听器watch方法,两个值,一个新值一个老值, 通过 watch 来响应数据的变化,一般用于在项目中监听路由的变化

watch方法分为基本类型与引用类型

基本类型如下:

handler引用类型如下:

deep深入监听 ,不返回新老值,直接监听

immediate一打开页面就会执行侦听器

引用数据类型简单粗暴的用法

Vue.js 组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

注:顺序为组件优先new Vue,

组件分为全局组件和局部组件

全局组件:

所有的实例都能用全局组件

组件名要是使用的驼峰写法,就要使用-来分割

也可以缩写/来关闭

局部组件

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用

html部分

组件部分

vue部分

自定义组件

在自定义组件不要使用驼峰命名

props父传子,注意点是加v-bind传的是变量,不加v-bind穿的是字符串

子级:

父级

但是单型数据流,只能父级穿给子级,如果要改变父亲的值,只能用自定义事件this.$emit()

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- 组件名使用大写,要使用-分割 -->
        <!-- 多个组件不在一起不要缩写 -->
        <!-- :msg="msg" 父传子 加v-bind 传的是变量, 不加v-bind传的是字符串 -->
        <List-Page v-bind:msg="msg" @msgfn="msgfn"></List-Page>
        <datail></datail>
        <chidpage></chidpage>
    </div>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
    <script>
        // 全局组件,注意顺序,先写全局组件 在new实例
        Vue.component("ListPage", {
            props: ["msg"],
            template: `
            <div>
                <h1>自定义组件!</h1>
                <h2 @click="changeMsg">{{msg}}</h2>
            </div>
            `,
            methods: {
                changeMsg() {
                    // 单向数据流
                    // 直接改，父组件的值没有变化
                    // 需要使用自定义事件的方法来实现子改父
                    this.$emit("msgfn", "我不爱")
                }
            }
        })
        Vue.component("datail", {
            template: '<h1>全局组件!</h1>'
        })
        new Vue({
            el: "#app",
            data: {
                msg: "我爱"
            },
            methods: {
                msgfn(s) {
                    this.msg = s;
                },
            },
            components: {
                "chidpage": {
                    template: `
                <h1>子组件!</h1>
                `
                }
            },
        })
    </script>
</body>