文章目录
监听器 watch
实例：监听器 watch
Watch 用法1：常见用法
<body> <div id="root"> <h3>Watch 用法1：常见用法
h3> <input v-model="message"> <span>{
{copyMessage}}
span>
div> <script> new Vue({
el: '#root', watch: {
message(value) {
this.copyMessage = value } }, data() {
return {
message: 'Hello Vue', copyMessage: '' } } })
script>
body> 键值一体，键为message，值为message()方法
message(value) {
this.copyMessage = value } Watch 用法2：绑定方法
<body> <div id="root2"> <h3>Watch 用法2：绑定方法
h3> <input v-model="message"> <span>{
{copyMessage}}
span>
div> <script> new Vue({
el: '#root2', watch: {
message: 'handleMessage' }, data() {
return {
message: 'Hello Vue', copyMessage: '' } }, methods: {
handleMessage(value) {
this.copyMessage = value } } })
script>
body> 键为message，值为’handleMessage()方法，每次监听到message变化，’handleMessage()方法就会执行一次
PS：双向绑定的值（
v-model="message"和data() {return {message}}）和watch监听的键要保持一致，同为message
Watch 用法3：deep + handler
<body> <div id="root3"> <h3>Watch 用法3：deep + handler
h3> <input v-model="deepMessage.a.b"> <span>{
{copyMessage}}
span>
div> <script> new Vue({
el: '#root3', watch: {
deepMessage: {
handler: 'handleDeepMessage', deep: true } }, data() {
return {
deepMessage: {
a: {
b: 'Deep Message' } }, copyMessage: '' } }, methods: {
handleDeepMessage(value) {
this.copyMessage = value.a.b } } })
script>
body> Watch 用法4：immediate
<body> <div id="root"> <div id="root4"> <h3>Watch 用法4：immediate
h3> <input v-model="message"> <span>{
{copyMessage}}
span>
div> <script> new Vue({
el: '#root4', watch: {
message: {
handler: 'handleMessage', immediate: true, } }, data() {
return {
message: 'Hello Vue', copyMessage: '' } }, methods: {
handleMessage(value) {
this.copyMessage = value } } })
script>
body> watch默认情况下在页面首次渲染时，即使监听的值有初始值，也不会直接执行，这种情况下想要第一次渲染后直接监听就需要添加属性：immediate: true
initWatch
createWatch
Watch 用法5：绑定多个 handler
<body> <div id="root5"> <h3>Watch 用法5：绑定多个 handler
h3> <input v-model="message"> <span>{
{copyMessage}}
span>
div> <script> new Vue({
el: '#root5', watch: {
message: [{
handler: 'handleMessage', }, 'handleMessage2', function(value) {
this.copyMessage = this.copyMessage + '...' }] }, data() {
return {
message: 'Hello Vue', copyMessage: '' } }, methods: {
handleMessage(value) {
this.copyMessage = value }, handleMessage2(value) {
this.copyMessage = this.copyMessage + '*' } } })
script>
body> 监听值为多个，需要用数组形式：
- 值为对象：执行对象的handler属性值对应方法handleMessage
- 值为字符串：执行字符串对应方法handleMessage2
- 值为方法：直接执行方法
先监听的先执行，各自独立，每个都是独立的监听器
本示例中value都是一致的，只有handleMessage获取了这个value，其他监听器处理的都是上一步处理过的copyMessage
若多个监听器监听同一个对象，那么只会渲染最后一次处理结果
Watch 用法6：监听对象属性
<body> <div id="root6"> <h3>Watch 用法6：监听对象属性
h3> <input v-model="deepMessage.a.b"> <span>{
{copyMessage}}
span>
div> <script> new Vue({
el: '#root6', watch: {
'deepMessage.a.b': 'handleMessage' }, data() {
return {
deepMessage: {
a: {
b: 'Hello Vue' } }, copyMessage: '' } }, methods: {
handleMessage(value) {
this.copyMessage = value } } })
script>
body> 只监听对象的某少数个属性值时，可以用对象.属性字符串形式进行监听
源码解析参见：Vue.js 源码分析(七) 基础篇 侦听器 watch属性详解
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/224202.html原文链接：https://javaforall.net
