易被忽略的vue知识点

最新推荐文章于 2022-07-13 09:47:28 发布

MiemieWan

最新推荐文章于 2022-07-13 09:47:28 发布

阅读量267

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/MiemieWan/article/details/93997740

版权

vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

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.动画原理

MiemieWan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
易被忽略的vue知识点

1.v-once指令：只能执行一次性地插值，当数据改变时，插值处的内容不会更新。例：<template> <div> <h1>{{num}}</h1>  <h1 v-once>{{num}}</h1> <!-- 点击后一直在...
复制链接

扫一扫