vue-----面试题

爱被打了一巴掌 2024-04-06 12:23 11阅读 0赞

## computed与methods的区别？ ##

### 1：computed有缓存依赖 如果值没有发生变换是不会重新调用computed。 ###

### methods是没有缓存的，每一个调用都会重新执行或者渲染。 ###

### 2：computed不处理异步请求，methods可以发送异步请求。 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>Document</title>
    	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
    </head>
    <body>
    	<div id="app">
            {
       {total}}
    		{
       {total}}
    		{
       {total}}
    		{
       {total}}
    		{
       {str()}}
    		{
       {str()}}
    		{
       {str()}}
    		{
       {str()}}</div>
    	<script>
    		new Vue({
    			el:"#app",
    			data:{
    				
    			},
                 computed:{
    				// 重新返回属性 主要是处理data中需要计算/处理的属性 
    				total(){
    					console.log('计算属性');
    					return 111
    				}，
    			methods:{
                        str(){
    					console.log('这是methods');
    					return 222
    				}
                          }
    		})
    	</script>
    </body>
    </html>

运行结果：

![9e92817b17a9417289eecaf5d897fbfa.png][]

## computed与watch的区别？ ##

### 1 computed具有缓存性，页面重新渲染值不会变化，computed会立即返回之前的计算结果，而不用再次执行函数。watch没有缓存性，只有当前值发生变化时再会执行或者响应。 ###

### 2 computed计算某一个属性的变化，如果某一个值改变了，computed会监听到并进行返回。 ###

### watch监听值的变化，执行异步操作（axios请求） ###

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>Document</title>
    	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
    </head>
    <body>
    	<div id="app">
    		<input type="number" v-model="a">
    		<input type="number" v-model="b">
    		<input type="text" v-model="obj.name">
    	</div>
    	<script>
    		new Vue({
    			el:"#app",
    			data:{
    				a:0,
    				b:0,
    				obj:{
    					name:"莉莉",
    					age:12
    				}
    			},
    			watch:{
    				// 基本数据类型
    				a(){
    					console.log('a被改变了');
    				},
    				b:{
    					handler(){
    						console.log('b被改变了');
    					}
    				},
    				// 监听引用数据类型
    				obj:{
    					// 浅监听
    					handler(newValue,oldValue){
    						console.log(newValue.name,oldValue.name);
    					},
    					// 递归监听 深度监听
    					deep:true
    				}
    			},
    			methods:{}
    		})
    	</script>
    </body>
    </html>

运行结果：

![54c681b15c9046da894f372fd97506c9.png][]

[9e92817b17a9417289eecaf5d897fbfa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/17b3a1c6c67a424a8b08b6cf9c1525aa.png
[54c681b15c9046da894f372fd97506c9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/a546ffa35a594a48a9ad77d2c5e9f0e4.png