你还不会 Vue3 吗

作者：bo

2022 年 7 月 24 日
本文字数：1042 字
阅读完需：约 3 分钟

computed 计算属性

计算属性在处理一些复杂逻辑时是很有用的，用法和 methods 一样
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

watch 监听属性

通过 watch 来响应数据的变化

<!DOCTYPE html><html><head>	<meta charset="utf-8">	<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script></head>   <body>      <div id = "computed_props">         千米 : <input type = "text" v-model = "kilometers">         米 : <input type = "text" v-model = "meters">      </div>	   <p id="info"></p>      <script type = "text/javascript">         var vm = new Vue({            el: '#computed_props',            data: {               kilometers : 0,               meters:0            },            methods: {            },            computed :{            },            watch : {               kilometers:function(val) {                  this.kilometers = val;                  this.meters = this.kilometers * 1000               },               meters : function (val) {                  this.kilometers = val/ 1000;                  this.meters = val;               }            }         });         // $watch 是一个实例方法		vm.$watch('kilometers', function (newValue, oldValue) {			// 这个回调将在 vm.kilometers 改变后调用		    document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;		})      </script>   </body></html>

复制代码

$data & data

vm.$ 读取实例中属性列表（第一层）

vm.data 直接读取实例 data 数据属性中的数据值（第二层）。等价于 vm.$data.data

$refs

<input type='text' ref='input1' /><button @click='add'> 添加数值</botton>

复制代码

methods:{    add:function(){       //this.$refs.input1  减少获取dom节点的消耗        this.$refs.input1.value ="10";         }    }

复制代码

2.ref 加在子组件上，用 this.$refs.（ref 值）获取到的是组件实例，可以使用组件的所有方法及 data 的变量。

3.如果通过 v-for 遍历想加不同的 ref 时记得加 :号，即 :ref =某变量 ;

发布于: 3 小时前阅读数: 8

原文链接:【http://xie.infoq.cn/article/64c172ef5c40eb7048e20461f】。文章转载请联系作者。

bo

关注

还未添加个人签名 2022.07.11 加入

还未添加个人简介

发布

暂无评论

创作场景

你还不会 Vue3 吗

computed 计算属性

watch 监听属性

$data & data

$refs

bo

评论