VUE框架学习第三天

1.计算属性的基本使用

​
 <div id="app">
        <h2>{{firstName}}--{{lastName}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{Fullname}}</h2>
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data(){
                return {
                    firstName:"zhang",
                    lastName:"san",
                }
            },
            methods:{
                getFullName(){
                    return this.firstName+"--"+this.lastName
                }
            },
            computed:{//计算属性
                Fullname(){
                    return this.firstName+"--"+this.lastName
                }
            },

        });
    </script>

​

如上图所示，在methods里面的getFullName方法，是方法调用。在computed中就是计算属性，在h2标签渲染中，可以发现，他和methods中的方法不一样，因为，它只需要写Fullname,不用写小括号。

2.计算属性的复杂使用

 <div id="app">
			<h2>总价：{{totalPrice}}</h2>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data(){
                return{
                    books: [{
								id: 110,
								name: "JavaScript从入门到入土",
								price: 119
							},
							{
								id: 111,
								name: "Java从入门到放弃",
								price: 80
							},
							{
								id: 112,
								name: "编码艺术",
								price: 99
							},
							{
								id: 113,
								name: "代码大全",
								price: 150
							}
						]
                }
            },
            methods:{

            },
            computed:{ 
                // 第一种 for循环             
                // totalPrice(){  
                //     let total = 0;                 
                //     for(let i =0;i<this.books.length;i++){
                //         total+=this.books[i].price;
                //     }
                //     return total;
                // }

                // 第二种 for in 方法
                // totalPrice(){
                //     let total = 0;                 
                //     for(let i in this.books){
                //         total+=this.books[i].price;
                //     }
                //     return total
                // }

                // 第三种 for of方法
                // totalPrice(){
                //     let total=0;
                //     for(let item of this.books){
                //         total+=item.price;
                //     }
                //     return total
                // }

                // 第四种 forEach方法
                // totalPrice(){
                //  let total=0; 
                //  this.books.forEach(item=> {
                //    total+=item.price;
                //  });   
                //  return total
                // }
               
                // 第五种 map 方法
                // totalPrice(){
                //     let total =0;
                //     this.books.map((item)=>{
                //         total+=item.price;
                //     })
                //     return total
                // }

                // 第六种 filter方法
                // totalPrice(){
                //     let total=0;
                //     this.books.filter((item)=>{
                //         total+=item.price;
                //     })
                //     return total
                // }

                // 第七种 reduce方法
                // totalPrice(){
                    // return this.books.reduce(function(total,item){
                    //     return total+=item.price;
                    // },0)
                //     return this.books.reduce((total,item)=>total+=item.price,0)

                // }
            }
        });
    </script>

计算属性的复杂使用，如上代码可以详细看明，在这里可以运用到ES6中学习的方法，上述7种办法。

3.计算属性的setter和getter

在计算属性中其实是由这样两个方法setter和getter,但是计算属性一般没有set方法，只读属性，只有get方法。

<div id="app">
			<h2>{{firstName}}-{{lastName}}</h2>
			<h2>{{fullName}}</h2><!-- 计算属性在页面渲染时 不需要加() -->
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {
						firstName: 'zhang',
						lastName: 'san'
					}
				},
				computed: { //计算属性
					/* fullName(){ 
						return this.firstName + '-' + this.lastName
					} */
					fullName: {
						get: function() {
							return this.firstName + '-' + this.lastName
						},
						set:function(value){
							console.log(value);
							var list = value.split('-')
							this.firstName = list[0]
							this.lastName = list[1]
						}
					}
				}
			})
		</script>

如果不写set，get的内容可以正常渲染到页面，但是在控制台修改fullName的值，并不会使值渲染到页面上。加上se后，把修改的值拆分成数组，赋值给firstName和lastName就可以实现渲染在页面上，但是一般情况下是用不到的。

4.计算属性和methods的对此

如下图在methods方法和计算属性渲染的时候打印它们分别调用了几次

 <div id="app">
        <!-- 计算属性 -->
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <!-- --方法-- -->
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue ({
            el:"#app",
            data(){
                return {
                    firstName:"zhang",
                    lastName:"san"
                }
            },
            methods:{
                getFullName(){
                    console.log("调用了一次方法");
                    return this.firstName+"-"+this.lastName;
                }
            },
            computed:{
                fullName(){
                    console.log("调用了一次计算属性");
                    return this.firstName+"-"+this.lastName;
                }
            }
        })
    </script>

 

 由此可见计算属性有缓存，在的属性不变的情况下，methods调用了四次，而计算属性才调用了一次，性能上计算属性明显比methods好。而且在改动firstName的情况下，计算属性只调用一次，methods依然要调用4次。

总结：1.计算属性是一个属性 必须要有返回值 methods不一定

            2.计算属性在页面渲染时 不需要加括号 methods必须要加

            3.计算属性有缓存 methods没有缓存 从性能上来讲 计算属性更具有优势

5. vue计算属性与侦听器总结

咱先简单监听一个data里面的firstName

<div id="app">
        <h2>{{firstName}}-{{lastName}}</h2>
        <h2>{{watchFullName}}</h2>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data(){
                return {
                    firstName:"zhang",
                    lastName:"san",
                    watchFullName:"zhangsan"
                }
            },
            methods:{

            },
            computed:{

            },
            watch:{
                firstName(newval,oldval){
                    console.log(newval);
                    console.log(oldval);
                }
            }
        });
    </script>

 通过监听firstName也可以在渲染上改变watchName的值，如下面代码

  watch:{
                firstName(newval,oldval){
                    console.log(newval);
                    console.log(oldval);
                    this.watchFullName=this.firstName+this.lastName;
                }
            }