vue3对typescript的支持 vue2.0 typescript

目录

• 需求
• 第一个实现方法（插值语法的实现）
• 第二种方法（method方法实现）
• 第三种方法（计算属性）
• 计算属性简写

需求

页面有3个输入框，第一个输入框写姓，第二个输入框写名，第三个输入框就自动的把前两个输入框的写的东西进行拼接，进行展示，那么实现方法有哪些呢？

第一个实现方法（插值语法的实现）

以上就实现了只要上面的输入框里面的值变化，那么第三个姓名后面的东西就变化。

我们看代码，

直接拼接，如果我想要有复杂的变化，比如将输入的东西翻转之后，小写之后再展示，这个是在代码里面可以实现，但是如果把这些都写在页面标签里面，那么代码就冗余了，这个是不好的。

第二种方法（method方法实现）

只要data里面的东西一变化，vue就会解析模板，重新渲染，也就是重新调用方法，每一次data里面变化，都会调用这个对应的方法

第三种方法（计算属性）

计算属性，说白了就是把data里面的属性进行计算变化之后，生成新的数据放到页面。

写法就是在computed 里面进行书写，get（）这个方法是必须的，get方法里面的this就是vm实例对象，所以在get方法里面可以通过this直接获取data里面的东西。

如果页面多个地方调用这个计算属性，那么他只是执行一次计算属性里面的get方法，计算完之后就会被缓冲起来，以后页面哪个地方再使用，那么直接从缓冲里面拿就可以了。

计算属性里面不仅仅有get方法，还有set方法

计算属性简写

计算属性可以修改，但是一般是只是计算完页面展示就可以，所以只有读的时候简写就可以了，改的时候不能简写

简写就是和方法里面的写法一样了，方法体里面就是get里面的东西就可以了

也就是写法都一样，但是一个可以进行缓冲，一个不可以