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

Vue的计算属性/侦听器/组件用法详解
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()
```
    <div id="app">
        <h1>{{msg}}h1>
        
        
        
        <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: `
            
                自定义组件!
                {{msg}}
            
```
`,
methods: {
changeMsg() {
// 单向数据流
// 直接改，父组件的值没有变化
// 需要使用自定义事件的方法来实现子改父
this.$emit("msgfn", "我不爱")
}
}
})
Vue.component("datail", {
template: '全局组件! '
})
new Vue({
el: "#app",
data: {
msg: "我爱"
},
methods: {
msgfn(s) {
this.msg = s;
},
},
components: {
"chidpage": {
template: `
子组件!
`
}
},
})
script>

Vue.js 组件

局部组件

自定义组件!

{{msg}}

全局组件!

子组件!