易被忽略的vue知识点

1.v-once指令:只能执行一次性地插值,当数据改变时,插值处的内容不会更新。

例:

<template>
    <div>
        <h1>{{num}}</h1> <!-- 点击后一直在改变 -->
        <h1 v-once>{{num}}</h1>  <!-- 点击后一直在不变,值为初试赋值1 -->
        <button @click="changeNum">改变msg</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            num: 1
        }
    },
    methods: {
        changeNum () {
            this.num ++ 
            console.log(this.num) //点击后一直在改变
        },
    }
}
</script>

 例:此例子中msg在created中定义了,但是还没被插值,只有在mounted时才进行了插值,所以msg只进行了一次插值操作,插入的值均为 ‘第二次改变值’

<template>
    <h1>{{msg}}</h1> 
    <h1 v-once>{{msg}}</h1> 
</template>

<script>
export default {
    data() {
        return {           
            msg: '初始值'            
        }
    },
    methods: {
        changeMsg() {
            this.msg = '第一次改变值'
        },
        againChangeMsg() {
            this.msg = '第二次改变值'
            console.log(this.msg)
        },
    },
    created() {
        changeMsg()
        againChangeMsg()
    }
}
</script>

 

2、计算属性

特点:(1) 计算属性不在data中做初始化,因为计算属性默认只有 getter ,不过在需要时也可以自己写一个 setter 

例:当 firstname或lastname改变时,getter会被调用,fullname值将会被改变

运行 vm.fullName = 'John Doe' 时,setter 会被调用,vm.firstName 和 vm.lastName也会相应地被更新。

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

 

 (2)计算属性根据响应式依赖(data中声明的变量)的变化而变化,依赖不变,计算属性不会变

例:now不会因为Date.now()的改变而改变

computed: {
  now: function () {
    return Date.now()
  }
}

 (3)可以监听到对象内部值的变化

 

3、侦听属性

 特点:(1)属性需在data中初始化

(2)数据跟随其他数据的变化而变化

(3)发现不了对象内部值的变化(除了数组),可添加deep:true开启监听对象内部值的变化,用handel属性控制

<!DOCTYPE html>
<html>
<head>
	<title>计算属性和侦听器(watch和computed)</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
 
</head>
<body>
	<div id="app">dgdgdgsdgg</div>
	<script>
		var App = {
			template:`
				<div>
					<input type="text" v-model="msg">
					<input type="text" v-model="list[0].name">
					<input type="text" v-model="list[0].age">
				</div>
			`,
			data() {
				return {
					msg:665,
					list:[{name:'John','age':12}]
				}
			},
			watch: {
				msg(newVal,oldVal) {
					console.log(this.msg);
					console.log(newVal); //返回msg未改变前的值
					console.log(oldVal); //返回msg改变后的值
				},
				list() { //在变异 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。所以这里完全不会被调用到,需要对对象或数组进行深度观察
					console.log(this.list[0].name);
					console.log(this.list[0].age);
				},
				//对数组进行深度观察
				list: {
					deep:true,
					handler:function() {
						console.log('深度监视成功!!!!');
						console.log(this.list);
						console.log(this.list[0].name);
						console.log(this.list[0].age);
					}
					
				}
			}
		}
		new Vue({
			el:document.getElementById('app'),
			components: {
				App
			},
			template: '<App />'
		})
	</script>
</body>
</html>

 

4、不推荐同时使用 v-if 和 v-for。当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。

 

5、prop传值时,如果是非字符串都要用v-bind当前缀。传入一个对象的所有属性,可以使用不带参数的 v-bind

post: {
  id: 1,
  title: 'My Journey with Vue'
}
<blog-post v-bind="post"></blog-post>

6、按需加载组件

components: {
    'my-component': () => import('./my-async-component')
  }

7.动画原理

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值